How to convert a JavaScript Object into an actual file in order to upload with HTML5

Question

I have a JavaScript object with a huge amount of data in it, including several large base64 encoded strings.

We are currently sending the data to the server via a simple ajax POST but since the data is so large the wait time for the user is unacceptable.

For this reason we wish to harness the new html5 file upload features and actually measure the progress as the data is uploaded to the server so that the user is provided with constant feedback during this lengthy process.

In order to use this feature this large array will have to be sent as an actual file rather than as a huge object sent as url params.

Is there any way to either:

A. Convert this object into an actual text file and send it that way.

or

B. Hook into the html5 progress api and actually measure the progress of this standard ajax POST.

Thanks in advance.

Answer 1

It's possible to take a JavaScript object (myData), stringify it into JSON, pack that into a Blob of mimetype JSON, and send that to the server with the HTML5 upload API. You can use the progress (in the progress callback function) to update the value of an HTML5 progress bar.

var myData = {
    data1: "Huge amount of data",
    data2: "More very large data"
};

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function (e) {
    console.log(100*(e.loaded / e.total) + '%');
}, false);

xhr.open('POST', 'url', true);

var data = new FormData();
data.append('file', new Blob([JSON.stringify(myData)],{type:'application/json'}));
xhr.send(data);