Question

I’m using the JavaScript “file” api to read information about images that will be uploaded, in order to generate a preview thumbnail before the actual upload occurs, based on a demo found here (JavaScript file api).

Using an file input with a “multiple” attribute, one or more files can be selected at the same time, like so: <input type="file" id="imageFiles" name="userfile[]" multiple />

Once the image(s) have been selected by the user, I inspect the element with firebug and I can see in the DOM that the “files” object contains information about each image selected.

The “file” object will contain as many properties as files were selected and each property has information about each image. I could only describe the “file” object as an associative array in the sense that each property is an object in itself.

What I want to do is be able to remove from the “file” object a given proprety, thus removing one of the images that will be uploaded, without having to select the images again.

So far this is what I’ve tried and it does not work:

var getAllFiles = document.getElementById('imageFiles');
var allImages = getAllFiles.files; // returns an object with X properties
delete allImages[X]; // "X" is whatever property key I'm passing in

I’ve tried the “splice()” method but it does not work either.

Thank you very much.

Answer 1

The .files is readonly so you cannot modify it. You can extract the files themselves to an array but then you cannot use the normal form upload, you’d need to upload them through binary XHR

You can extract the files to a normal array using:

var files = [].slice.call( this.files );
files.splice( 1, 1 ); //whatever works for normal array

You could also just put accept="image/*" in the input in the first place:

<input type="file" id="imageFiles" accept="image/*" name="userfile[]" multiple />

I take it you understand these won’t work in IE or any other browser without file API.