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.

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.

• javascript
• html

• just use files[0-4] in your uploader part, you can't reliably change the files collection itself. – dandavis Commented Oct 29, 2013 at 18:17
• Possible duplicate of How to remove one specific selected file from input file control – Endless Commented Dec 9, 2017 at 12:56

1 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.