3

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.

casperOne
  • 73,706
  • 19
  • 184
  • 253
jnkrois
  • 658
  • 1
  • 12
  • 30
  • Duplicate of http://stackoverflow.com/questions/208105/how-to-remove-a-property-from-a-javascript-object ?? or http://stackoverflow.com/questions/346021/how-do-i-remove-objects-from-a-javascript-associative-array – HandiworkNYC.com Jan 22 '12 at 17:15
  • 3
    The title misstates the question. `files` is not a dictionary, it's member of a DOM object. There are a lot of security considerations about what Javascript can and cannot do to any DOM object but none is more tightly controlled than an INPUT of type file. Re-title your question with "How to de-select a file from a multi-file upload INPUT?" – Michael Lorton Jan 22 '12 at 17:17
  • Thank you for your time j-man86 and Malvolio. – jnkrois Jan 22 '12 at 17:24

1 Answers1

4

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.

Esailija
  • 138,174
  • 23
  • 272
  • 326
  • Thank you very much Esailija. After some reading and browsing I realized that it is a read-only situation. I understand the security concerns, but it would have been nice to enable the removal of files with just a click of the thumbnail itself. Also I know it is not fully suported yet, I have a fallback for that already in place. Thank you so much. – jnkrois Jan 22 '12 at 18:16