Remove a FileList item from a multiple "input:file"

Question

I have this DOM:

var id = 0;

$('input:file#upload')[0].files[ id ]

That get's the first file on the 0th index. File properties are listed and all works, but...

How do we remove items from the DOM's [object FileList] with JavaScript?

Answer 1

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.