Finally found a way!
I knew before that input.files
would accept a FileList but the only way to get it was through a drag and drop event.
But now i know how to construct a own FileList!
This works in chrome (and maybe some other)
const dt = new DataTransfer()
dt.items.add(new File([], 'a.txt'))
input.files = dt.files
// This will remove the first item when selecting many files
input.onchange = () => {
const dt = new DataTransfer()
for (let file of input.files)
if (file !== input.files[0])
dt.items.add(file)
input.onchange = null // remove event listener
input.files = dt.files // this will trigger a change event
}
<input type="file" multiple id="input">
This works in Firefox
const cd = new ClipboardEvent("").clipboardData
cd.items.add(new File(['a'], 'a.txt'))
input.files = cd.files
// This will remove the fist item when selecting many files
input.onchange = () => {
const dt = new DataTransfer()
for (let file of input.files)
if (file !== input.files[0])
dt.items.add(file)
input.onchange = null // remove event listener
input.files = dt.files // this will trigger a change event
}
<input type="file" multiple id="input">
The thing is you need to loop over each file in the input, add those you still want to keep and assign the file.files with the new list of files.