input type=file multiple, delete items

Question

html:

<input accept="image/*" class="" id="my_pics" multiple="multiple" name="pics" required="true" type="file" />

js:

var files = document.getElementById('my_pics').files;
files.splice(1,2)
//TypeError: Object #<FileList> has no method 'splice'
delete files.item(2)
// true, but nothing happens with "2"
delete files[2]
// false, result is the same

I have a form with multiple file, I need to upload on server only limited number of images (for example, 5) in one input, but my code doesnt work.

How to fix it? Thanks.

just use files[0-4] in your uploader part, you can't reliably change the files collection itself. — dandavis, Oct 29 '13 at 18:17
Possible duplicate of [How to remove one specific selected file from input file control](https://stackoverflow.com/questions/19060378/how-to-remove-one-specific-selected-file-from-input-file-control) — Endless, Dec 09 '17 at 12:56

score 5 · Answer 1 · edited May 23 '17 at 11:51

You can't delete that because it's a File object pointed to in the FileList object, hence the error above. However, you can iterate over the FileList and only push the items that you want onto an array, which you can then modify:

var files = document.getElementById('my_pics').files;
var newList = [];

for(var i = 0; i < files.length; i++)
{
    if(i !== 2)
    {
        newList.push(files.item(i));
    }
}

As you can see from this answer, you can't delete the actual object. Only the reference to the object can be deleted. So, even if it worked for the FileList object, which it doesn't, it would only set that element equal to undefined.

input type=file multiple, delete items

1 Answers1

Linked