Uploading image to Azure BlobStorage with Javascript

Question

I want to select an image file on my HTML5 Webpage with Input type="file" and send it with jQuery or plain JavaScript to my Azure BlobStorage (secured with SAS).

There are some examples how to do this out in the net. I´ve handled till now everything, what I Need: Creating SAS, sending PUT to BlobStorage with SAS and CORS. My Image is created in BlobStorage. BUT: My file on Azure has a length of 0.

Since my code is working so far, that it created an "empty" file in the cloud, my Problem is now, how I can send the right data to it.

Here´s my Submission:

f_UploadSelectedHandler(evt) {
    var reader = new FileReader();
    reader.onloadend = function (reader_evt) {
        // Here are my tries:
        var mByteArray = reader_evt.target.result;
        //var mByteArray = new Uint8Array(reader_evt.target.result);
        //var mFileData = '';
        //for (var i = 0; i < mByteArray.byteLength; i++) {
        //    mFileData += String.fromCharCode(mByteArray[i]);
        //}
        $.ajax({
            url: mSAS_URL,
            type: "PUT",
            //data: mFileData,
            data: mByteArray,
            headers: {
                "x-ms-blob-type": "BlockBlob",
                "x-ms-date": (new Date()).toUTCString(),
                "Content-Type": mSelectedFileContentType
            },
            success: function (data) {
                alert("done");
            },
            error: function (e, y, s) {
                alert("error");
            }
        })
    }
    reader.readAsArrayBuffer(evt.target.files[0]);
}

If I use var mByteArray = reader_evt.target.result; the uploaded file has a size of 0.

If I use var mByteArray = new Uint8Array(reader_evt.target.result); the uploaded file is corrupted.

If I use var mFileData = ''; for (var i = 0; i < mByteArray.byteLength; i++) { mFileData += String.fromCharCode(mByteArray[i]); } the uploaded file is corrupted.

Every sample I found on the net uses the simplest way:

Init everything with: reader.readAsArrayBuffer(evt.target.files[0]);
Putting in data for ajax: reader_evt.target.result

But so my file is 0. It seems, I have to encode or convert the data from reader_evt.target.result for Azure in some way. Or the reader.readAsArrayBuffer(evt.target.files[0]); is the wrong method. But I´ve tried everything ...

Any ideas?

Consider using Fine Uploader, which has native support for uploading to Azure. It deals with the Azure API for you so you don't have to (as far as uploading the file is concerned). Read more at docs.fineuploader.com/branch/master/features/azure.html. Full disclosure: I am on the Fine Uploader development team. — Ray Nicholus
– Ray Nicholus, Commented Jun 2, 2014 at 17:02

Oliver Apel · Accepted Answer · 2014-06-02 17:49:55Z

1

Got it:

$.ajax({
    url: blobSasUrl,
    type: "PUT",
    data: fileDataAsArrayBuffer,
    processData: false,
    :
    :

The last line was the missing link. I must say to jQuery, to let the data as it is...

answered Jun 2, 2014 at 17:49

Oliver Apel

1,8784 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Uploading image to Azure BlobStorage with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related