Search code examples
javascripthtmldrag-and-dropfilelist

How do I remove a file from the FileList

I'm building a drag-and-drop-to-upload web application using HTML5, and I'm dropping the files onto a div and of course fetching the dataTransfer object, which gives me the FileList.

Now I want to remove some of the files, but I don't know how, or if it's even possible.

Preferably I'd like to just delete them from the FileList; I've got no use for them. But if that's not possible, should I instead write in checks in code that interacts with the FileList? That seems cumbersome.

Solution

  • If you want to delete only several of the selected files: you can't. The File API Working Draft you linked to contains a note:

    The HTMLInputElement interface [HTML5] has a readonly FileList attribute, […]
    [emphasis mine]

    Reading a bit of the HTML 5 Working Draft, I came across the Common input element APIs. It appears you can delete the entire file list by setting the value property of the input object to an empty string, like:

    document.getElementById('multifile').value = "";

    BTW, the article Using files from web applications might also be of interest.