Remove a FileList item from a multiple "input:file"
Finally found a way!
I knew before that input.files would accept a FileList but the only way to get it was throught 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 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">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.
I' am afraid that you cannot delete objects from FileList object directly. Just assign $('input:file#upload')[0].files to an Array and then remove items from that array using splice or method of your choice and then use that Array.
I have found very quick & short workaround for this. Tested in many popular browsers (Chrome, Firefox, Safari);
First, you have to convert FileList to an Array
var newFileList = Array.from(event.target.files);
to delete the particular element use this
newFileList.splice(index,1);