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 si

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);

Answer 2

Convert to Blob object or File object, then append to FormData, and use xhr or fetch to send to server.

var data = 'some data'; //string, arrary buffer, typed array, blob, ...
var filename01 = 'abc.txt', filename02 = 'efg.txt';
var type = 'text/plain';
var fd = new FormData();

//use file object
var file = new File([data], filename01, {type:type}); //add filename here
fd.append('file01', file);

//use blob object
var blob = new Blob([data], {type:type});
fd.append('file02', blob, filename02); //add filename by append method

fetch('/server.php', {method:'POST', body:fd})
.then(function(res){
    return res.text();
})
.then(console.log)
.catch(console.error)
;