1

I'm trying to upload images to azure storage like so:

var xhr = new XMLHttpRequest();
xhr.open("GET", blobUrl);
xhr.responseType = "text";//force the HTTP response, response-type header to be blob
xhr.onload = function () {
    blobService.createBlockBlobFromText('taskcontainer', 'myblob', xhr.responseText,  {contentSettings: {contentType: "image/bmp"}}, (error, result, response)=>{
    })
}
xhr.send();

If I upload something simple like a text file with 'abc' it uploads fine, however if I try to upload something like an image it seems to get corrupted, the diff shows the file after it was uploaded to azure (left) and before it was uploaded: https://user-images.githubusercontent.com/2121021/35678518-cb006af4-07a7-11e8-963d-2bb8b45aba26.png

I'm not sure what's going on exactly and have been trying to solve this for a while now...

Federico Navarrete
  • 3,069
  • 5
  • 41
  • 76
meds
  • 21,699
  • 37
  • 163
  • 314
  • 1
    Could it be because you're setting the response type as text (`xhr.responseType = "text"`) and reading the binary content as text? – Gaurav Mantri Feb 02 '18 at 06:14
  • The responseText size is correct for the bitmap when it's uploaded, after it's on azure storage the uploaded file is somehow bigger so I don't think it's that. – meds Feb 02 '18 at 06:32

1 Answers1

0

Well, you'd need to set responseType to arraybuffer when you receive binary data via XMLHttpRequest object.

var xhr = new XMLHttpRequest();
xhr.open("GET", blobUrl);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
    blobService.createBlockBlobFromText('taskcontainer', 'myblob', new Uint8Array(xhr.response),  {contentSettings: {contentType: "image/bmp"}}, (error, result, response) => {
    })
}
xhr.send();
Aaron Chen
  • 9,835
  • 1
  • 16
  • 28