How to convert a JavaScript Object into an actual file in order to upload with HTML5
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);
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)
;