How do I remove a file from the FileList

javascript html drag-and-drop filelist
Heilemann picture Heilemann · Jun 29, 2010 · Viewed 157.1k times · Source

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.

Answer

Marcel Korpel picture Marcel Korpel · Jul 2, 2010

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.

Related questions

HTML5 dragleave fired when hovering a child element

The problem I'm having is that the dragleave event of an element is fired when hovering a child element of that element. Also, dragenter is not fired when hovering back the parent element again. I made a simplified fiddle: http://…

Read More
HTML5 Drag & Drop Change icon/cursor while dragging

I'm wondering how to change during dragging (dragover/dragenter) icon/cursor when I dragenter for example to deny or allow section. Of course, I can move with cursor a part of DOM positioned absolutely, but I'm interested in native HTML5 …

Read More
Prevent browser from loading a drag-and-dropped file

I'm adding an html5 drag and drop uploader to my page. When a file is dropped into the upload area, everything works great. However, if I accidentally drop the file outside of the upload area, the browser loads the local …

Read More