Saving blob (might be data!) returned by AJAX call to Azure Blob Storage creates corrupt image

Question

If I post a PDF to my vendors API, they return me a .png file as a blob (see update 2 as I am now unsure if they are returning blob data).

I would like to push this into Azure Blob Storage. Using my code listed below, it pushes something in, but the file is corrupted. Example: downloading the .png from Azure Blob Storage and trying to open it with Paint gives the following error:

This is not a valid bitmap file, or its format is not currently supported.

I have verified that the image is sent to me correctly as the vendor is able to open the .png on their side. I am wondering if I need to convert this to base64 or save it to a local Web directory before uploading it to Azure Blob Storage.

Here is my Angular front end Controller that calls my Node/Express backend for uploading to Azure once it receives the returned "image":

$.ajax({
            url: 'http://myvendorsapi.net/uploadPDF,
            type: "POST",
            data: formdata,
            mimeType: "multipart/form-data",
            processData: false,
            contentType: false,
            crossDomain: true,
            success: function (result) {          
                var containerName = 'container1';
                var filename = 'Texture_0.png';
                var file = result;
                $http.post('/postAdvanced', { containerName: containerName, filename: filename, file: file }).success(function (data) {
                    console.log("success!");
                }, function (err) {
                    //console.log(err);
                });
            },
            error: function (error) {
                console.log("Something went wrong!");
            }
        })
    }

Here is my Node/Express backend that uploads the blob to Azure Blob Storage. It gives no error, but the file can't be opened/gives the error stated above when opened in Paint:

app.post('/postAdvanced', function (req, res, next) {
    var containerName = req.body.containerName;
    var filename = req.body.filename;
    var file = req.body.file;

    blobSvc.createBlockBlobFromText(containerName, filename, file, function (error, result, response) {
        if (!error) {
            res.send(result);
        }
        else {
            console.log(error);
        }
    });
})

Update 1: The answer provided here allows me to pass in the URL of the vendors API for some endpoints: Download file via Webservice and Push it to Azure Blob Storage via Node/Express

It works as it writes the file at the endpoint to a temp folder. In my current scenario, I upload a PDF file and it returns an image file that I need to upload to Azure Blob Storage. Is there a way to use the answer here, but adjust it for a file that I already have (since it is returned to me) versus file streaming from a URL?

Update 2: In console logging the returned "file", it looks like it may be data. I am not sure, it looks like this:

Is this actually data, and if so, how do I make this into a file for upload?

UPDATE 3:

Since it appears that jQuery AJAX can't manage binary returns. I am able to "open" the blob using XMLHTTPResponse as follows, but I can't seem to push this into Azure as it gives me the following error:

TypeError: must start with number, buffer, array or string

Here is my request. Note that the file opens properly:

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function (ev) {

 var oData = new FormData(form);

    var xhr = new XMLHttpRequest();
    xhr.responseType = "arraybuffer";

    xhr.open("POST", "http://myvendorsapi/Upload", true);
    xhr.onload = function (oEvent) {
        if (xhr.status == 200) {
            var blob = new Blob([xhr.response], { type: "image/png" });
            var objectUrl = URL.createObjectURL(blob);
            window.open(objectUrl);

            console.log(blob);
            var containerName = boxContainerName;
            var filename = 'Texture_0.png';

            $http.post('/postAdvanced', { containerName: containerName, filename: filename, file: blob }).success(function (data) {
                //console.log(data);
                console.log("success!");
            }, function (err) {
                //console.log(err);
            });

        } else {
            oOutput.innerHTML = "Error " + xhr.status + " occurred when trying to upload your file.<br \/>";
        }
    };

    xhr.send(oData);
    ev.preventDefault();
}, false);

Answer 1

createBlockBlobFromText will work with either string or buffer. You might need a buffer to hold the binary content due to a known issue of jQuery.

For a workaround, there are several options:

Option 1: Reading binary filesusing jquery ajax

Option 2: Use native XMLHttpRequest

Option 3: Write frontend with Node as well and browserify it. Your frontend code may look like:

var request = require('request');

request.post('http://myvendorsapi.net/uploadPDF', function (error, response, body) {
  if (!error && response.statusCode == 200) {
    var formData = { 
      containerName: 'container1',
      filename: 'Texture_0.png',
      file: body
    };
    request.post({ uri: '/postAdvanced', formData: formData }, function optionalCallback(err, httpResponse, body) {
      if (err) {
        return console.error('upload failed:', err);
      }
      console.log('Upload successful!  Server responded with:', body);
    });
  } else {
    console.log('Get snapshot failed!');
  }
});

Then the backend code may look like:

app.post('/postAdvanced', function (req, res, next) {
  var containerName = req.body.containerName;
  var filename = req.body.filename;
  var file = req.body.file;

  if (!Buffer.isBuffer(file)) {
    // Convert 'file' to a binary buffer
  }

  var options = { contentType: 'image/png' };
  blobSvc.createBlockBlobFromText(containerName, filename, file, options, function (error, result, response) {
    if (!error) {
      res.send(result);
    } else {
      console.log(error);
    }
  });
})

Answer 2

Below I have the code to upload the image as binary in angular using FormData.
The server code will be the code to handle a regular file upload via a form.

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function (ev) {

var oData = new FormData(form);

var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";

xhr.open("POST", "http://vendorapi.net/Upload", true);
xhr.onload = function (oEvent) {
    if (xhr.status == 200) {
        var blob = new Blob([xhr.response], { type: "image/png" });
        //var objectUrl = URL.createObjectURL(blob);
        //window.open(objectUrl);
        //console.log(blob);
        var formData = new FormData()
        formData.append('file', blob);
        formData.append('containerName', boxContainerName);
        formData.append('filename', 'Texture_0.png');

        $http.post('/postAdvancedTest', formData, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).success(function (data) {
            //console.log(data);
            console.log("success!");

            // Clear previous 3D render
            $('#webGL-container').empty();

            // Generated new 3D render
            $scope.generate3D();
        }, function (err) {
            //console.log(err);
        });
    } else {
        oOutput.innerHTML = "Error " + xhr.status + " occurred when trying to upload your file.<br \/>";
    }
};

xhr.send(oData);
ev.preventDefault();
}, false);

Answer 3

I have solved the issue (thanks to Yang's input as well). I needed to base64 encode the data on the client side before passing it to node to decode to a file. I needed to use XMLHTTPRequest to get binary data properly, as jQuery AJAX appears to have an issue with returning (see here: http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/).

Here is my front end:

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function (ev) {

var oData = new FormData(form);

var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";

xhr.open("POST", "http://vendorapi.net/Upload", true);
xhr.onload = function (oEvent) {
    if (xhr.status == 200) {
        var blob = new Blob([xhr.response], { type: "image/png" });
        //var objectUrl = URL.createObjectURL(blob);
        //window.open(objectUrl);
        console.log(blob);
        var blobToBase64 = function(blob, cb) {
            var reader = new FileReader();
            reader.onload = function() {
                var dataUrl = reader.result;
                var base64 = dataUrl.split(',')[1];
                cb(base64);
            };
            reader.readAsDataURL(blob);
        };

        blobToBase64(blob, function(base64){ // encode
            var update = {'blob': base64};
            var containerName = boxContainerName;
            var filename = 'Texture_0.png';

            $http.post('/postAdvancedTest', { containerName: containerName, filename: filename, file: base64}).success(function (data) {
                //console.log(data);
                console.log("success!");

                // Clear previous 3D render
                $('#webGL-container').empty();

                // Generated new 3D render
                $scope.generate3D();
            }, function (err) {
                //console.log(err);
            });
        })
    } else {
        oOutput.innerHTML = "Error " + xhr.status + " occurred when trying to upload your file.<br \/>";
    }
};

xhr.send(oData);
ev.preventDefault();
}, false);

Node Backend:

app.post('/postAdvancedTest', function (req, res) {
var containerName = req.body.containerName
var filename = req.body.filename;
var file = req.body.file;
var buf = new Buffer(file, 'base64'); // decode

var tmpBasePath = 'upload/'; //this folder is to save files download from vendor URL, and should be created in the root directory previously.
var tmpFolder = tmpBasePath + containerName + '/';

// Create unique temp directory to store files
mkdirp(tmpFolder, function (err) {
    if (err) console.error(err)
    else console.log('Directory Created')
});

// This is the location of download files, e.g. 'upload/Texture_0.png'
var tmpFileSavedLocation = tmpFolder + filename;

fs.writeFile(tmpFileSavedLocation, buf, function (err) {
    if (err) {
        console.log("err", err);
    } else {
        //return res.json({ 'status': 'success' });
        blobSvc.createBlockBlobFromLocalFile(containerName, filename, tmpFileSavedLocation, function (error, result, response) {
            if (!error) {
                console.log("Uploaded" + result);

                res.send(containerName);
            }
            else {
                console.log(error);
            }
        });
    }
}) 
})