Programmatically set input type="file" value to base64 image?
Not possible. An HTML file input can only point to a file that actually exists on the computer -- it can't point to an arbitrary chunk of data.
No you can't set the value of a file input*, except to clear it, but it sounds that it's not what you need anyway.
Instead, convert this dataURI to a Blob, then append this Blob to a FormData and finally post this FormData.
Your image will be sent as multipart like you seem to need.
function dataURItoBlob(data) {
var binStr = atob(data).split(',')[1],
len = binStr.length,
arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
return new Blob(arr);
}
var dataURI = 'data:image/....';
var blob = dataURItoBlob(dataURI);
// you can even pass a <form> in this constructor to add other fields
var formData = new FormData();
formData.append('yourFileField', blob, 'fileName.ext');
var xhr = new XMLHttpRequest();
xhr.open('post', yourServer);
xhr.send(formData);
// now you can retrieve your image as a File/multipart with the 'yourFileField' post name
*Actually now you can do it, but it's still rather hackish.
You can try like below one. Convert your sting to Blob and create file type with created Blob.
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
var outputfile=new File([blob], "filename")