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.

Answer 1

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.