I need a way to add a File object to a file input field.
Note that I do not want to set the value of the file field. (which is a security risk, ... I know that)
I already have the file itself (and all its contents!)
I'm creating the File object like this:
canvas.toBlob(function(blob) {
var file = new File([blob], 'file.png');
// and now I want to add MY File to the input here
});
Please don't tell me about how to upload the File, I know about XMLHttpRequest Level 2. I want to upload the File to an external website (potentially using a userscript or something similar).
So, how can I achieve that? Or if it's not possible: why can't I add a File that I actually own (because I created it in the Browser (as a virtual File, which does not even exist in the users filesystem)) to an input field that I own too? (technically the input field could be my own, that does not matter here)
Yes it is possible:
To load file from blob:
let fileInputElement = document.getElementById('file_input');
let container = new DataTransfer();
// Here load or generate data
let data = new Blob();
let file = new File([data], "g"+i+".jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
container.items.add(file);
fileInputElement.files = container.files;
To load file from another file input:
let input1 = document.getElementById('file_input');
let input2 = document.getElementById('some_other_input')
let container = new DataTransfer();
[...input2.files].map(file=>container.items.add(file));
input1.files = container.files;