Remove elements from a multiple file input [duplicate]

Question

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.

Have you tried getting into the code in the jQuery-File-Upload plugin to see how its doing it? — nickdos
– nickdos, Commented Sep 11, 2012 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
– IgniteCoders, Commented Aug 29, 2014 at 16:30

Andrew Clarkson · Accepted Answer · 2012-09-14 00:34:32Z

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.

edited Sep 14, 2012 at 0:34

answered Sep 12, 2012 at 0:19

Andrew Clarkson

2851 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

iNDicator Over a year ago

Your code doesn't handle every file individually. This is no a solution!

Andrew Clarkson Over a year ago

So you need to be able to upload a list of selected files one by one like the example you gave?

iNDicator Over a year ago

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.

Andrew Clarkson Over a year ago

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 :)

iNDicator Over a year ago

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 ?

|

Collectives™ on Stack Overflow

Remove elements from a multiple file input [duplicate]

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related