4

I am able to select multiple files using the multiple property on file input tag. however i am wondering how to delete a single element.

I know that you can't manipulate the file input on its own because its a security hole and that browsers do not allow that, but i would like to point you to the jquery upload plugin : https://github.com/blueimp/jQuery-File-Upload.

This plugin allows you to remove individual elements, there is no flash there. all is javascript and the html5 api!

oh and i am aware of uploadify, i just want to stay with pure js and html file api.

iNDicator
  • 534
  • 2
  • 6
  • 15
  • Have you tried getting into the code in the jQuery-File-Upload plugin to see how its doing it? – nickdos Sep 11 '12 at 23:36
  • I solve it temporally by adding a hidden select where i add the discarded files. Then i upload all files to server and if the select param contains some file of the uploaded then don't save it. I know its not correct but cannot find the right solution. – IgniteCoders Aug 29 '14 at 16:30

1 Answers1

5

EDIT:

After better understanding what you were looking for, I whipped up another Demo where (from your JS) you're able to access the elements individually.

What I did was use the File API and File Readers:

  • Add an event handler to the input: $("#fileInput").on("change", processFiles);​

  • In your event handler use: event.target.files to access the FileList Object

  • Use a FileReader: var reader = new FileReader(); to read the file

  • You can read the files in a number of ways (binary, text, url, etc), I chose data url: reader.readAsDataURL(file);

  • Add a callback from the FileReader reader.onload = function(){...};

  • Within the callback push the result: event.target.result to an array

From there you can do what ever you want with it!

I just sent the data to an echo server, then generated links with the responses, Check It.

Andrew Clarkson
  • 295
  • 1
  • 7
  • Your code doesn't handle every file individually. This is no a solution! – iNDicator Sep 13 '12 at 02:15
  • So you need to be able to upload a list of selected files _one by one_ like the example you gave? – Andrew Clarkson Sep 13 '12 at 18:00
  • Basically what i want to do is select multiple files at once and then being able to upload one by one. So it would be something like a queue system, therefore the server receive only one single file at time and not an array of files. – iNDicator Sep 15 '12 at 04:21
  • Tight! that's what the demo does. Basically, you read the files from the input, store them in memory, and then upload them one by one, when you want (on the click of a button?) via an AJAX POST. I had never really tried this before :) – Andrew Clarkson Sep 15 '12 at 22:04
  • But you are reading files into the memory, i am dealing with big files, usually 2gb files. wouldn't your code kill the browser in case of selecting a file which is 2-3 gb ? – iNDicator Sep 16 '12 at 16:32
  • Perfect!!!... Works like VOODOO.... Thanks a million.. WORKS in all Human Friendly browesers... EXCEPT of course King_Internet_Explorer; i get the following error:: *SCRIPT5007: Unable to get value of the property 'length': object is null or undefined*___ but Who cares? – ErickBest Jul 20 '13 at 11:04
  • May be if Ok... is it possible to Remove individual files from Queue?.. As in having two buttons, Upload and Remove... thanx again – ErickBest Jul 20 '13 at 11:05
  • This is great. I've never used the File API and was looking for something functional to get me started. This is perfect. Thanks! – Gavin Aug 02 '13 at 10:16