Image upload from HTML5 and Javascript

Question

I have been struggling with this since a week. 
No tutorial on the web was able to help me.
Here is what i am trying to do. I am trying to upload an image via HTML5 . I am confused on how i should send the image as. Should i send it directly the response from HTML5 File reader API or i should convert it to a blob and send it? I am able to upload
text data. But when i upload image data. They won't turn up .

Answer 1

You should send the data you read from File API. So in your code above, you should send the data in "requestData" variable. I wrote a blog post some time ago about uploading large files using HTML 5, jQuery and Shared Access Signature which you
may find useful:
http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript/
Relevant code from that blog post:
var reader = new FileReader();
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
var uri = submitUri + '&comp=block&blockid=' + blockIds[blockIds.length - 1];
var requestData = new Uint8Array(evt.target.result);
$.ajax({
url: uri,
type: "PUT",
data: requestData,
processData: false,
beforeSend: function(xhr) {
xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
xhr.setRequestHeader('Content-Length', requestData.length);
success: function (data, status) {
console.log(data);
console.log(status);
bytesUploaded += requestData.length;
var percentComplete = ((parseFloat(bytesUploaded) / parseFloat(selectedFile.size)) * 100).toFixed(2);
$("#fileUploadProgress").text(percentComplete + " %");
uploadFileInBlocks();
error: function(xhr, desc, err) {
console.log(desc);
console.log(err);
Hope this helps.