url is an image, but the browser shows the base64 encoding

Question

I'm trying to upload an image to Windows Azure Blob Storage from javascript.

I successfully upload all the blob block and I can commit the blobk blob list.

But, When I try to navigate to the image I get the base64 encode of it and the browser fails to render it as an image.

You can try it here: base64 image

How can I show it in a browser? Must I download the string and use the

<img src="data:image/jpeg;base64," />

tag?

How can i download the image fast?

Thank you for your help.

Here you can see a JSFiddle with a copy and paste of the link

https://jsfiddle.net/66e47znh/

---

EDIT: code

The snippet I use to read the file:

var reader = new FileReader();
reader.onload = function(e){
    var data = reader.result;
    var binary = '';
    var bytes = new Uint8Array(data);
    var len = bytes.byteLength;

    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }

    var toSend = {
        ext : fileExt,
        file : btoa(binary)
    };
    UploadManager.startBlobUpload("newspic", toSend.file, toSend.ext, {
       //Callbacks when the upload finish
    });

};
var file = document.getElementById("image").files[0];
var fileName = file.name;
var fileExt = fileName.substr(fileName.lastIndexOf(".")+1);
reader.readAsArrayBuffer(file);

The snippet i use to read the file's chunk

UploadManager.blobUrl = sasQuery.blobUrl;
UploadManager.submitUri = UploadManager.blobUrl + "?" + sasQuery.sasQueryString;

//File reader   
UploadManager.reader = new FileReader();

UploadManager.reader.onload = function(e){
    var data = UploadManager.reader.result;     
    UploadManager.uploadSlicedChunk(data);

};

var fileContent = file.slice(UploadManager.currentFilePointer, 
UploadManager.currentFilePointer + UploadManager.maxBlockSize);


UploadManager.reader.readAsArrayBuffer(new Blob([fileContent]), {type : 'image/'+UploadManager.fileExt, endings : 'native'});

The snippet I use to upload a chunck

var num = '' + UploadManager.blockIdCounter;
while(num.length < 10){
    num = '0'+num; 
}

var blockId = btoa("block-"+num);

var uri = UploadManager.submitUri.substr(0,4)+UploadManager.submitUri.substr(4, UploadManager.submitUri.length)
        +"&comp=block&blockId="+blockId;
uri = uri.replace(":80", "");   
var requestData = new Uint16Array(data);


var ajaxOption = {
    url : uri,
    type : "PUT",
    data : requestData,
    headers : { "Access-Control-Request-Headers" : "x-requested-with" },
    crossDomain : true,
    processData : false,
    beforeSend: function(xhr) {
        xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
        xhr.setRequestHeader("Content-Type", UploadManager.fileType);
        xhr.setRequestHeader('Content-Length', requestData.length);
        xhr.withCredentials = true;
    },

    success : function (data, status) {

        //Upoad successfull -> update everything.
        UploadManager.blockIds.push(blockId);
        UploadManager.blockIdCounter += 1;
        UploadManager.bytesSent += requestData.length;
        UploadManager.currentFilePointer += UploadManager.maxBlockSize;
        UploadManager.totalRemainingBytes -= UploadManager.maxBlockSize;
        if(UploadManager.totalRemainingBytes < UploadManager.maxBlockSize){
            UploadManager.maxBlockSize = UploadManager.totalRemainingBytes;
        }

        //Prepare next upload;                  
        var percentComplete = ((parseFloat(UploadManager.bytesSent) / parseFloat(UploadManager.fileLen)) * 100).toFixed(2);
        if(UploadManager.totalRemainingBytes > 0){
            var fileContent = UploadManager.file.slice(UploadManager.currentFilePointer, 
                    UploadManager.currentFilePointer+UploadManager.maxBlockSize);
            UploadManager.reader.readAsArrayBuffer(new Blob([fileContent]), {type : 'image/'+UploadManager.fileExt, endings : 'native'});
        } else {
            UploadManager.commitBlob();
        }

    },
    error : function(jqXHR, status, error){
        alert(status + ", "+error+": "+jqXHR.responseText);
    }
};

$.ajax(ajaxOption);

Answer 1

It works, see the pen

http://codepen.io/cakeinpanic/pen/LVGpRb

Also works with jpg, png, jpeg