CODEWITHSUNDEEP
javascripthtml
Lukas
Lukas

Reputation: 1862

HTML Multiple File Upload Queue

I am looking for some way to create a queue of sorts for a file upload button. With the following code:

<input type = 'file' name = 'file[]' multiple = 'multiple' />

Modern browsers let you select multiple files at once to upload. However, if you click on the button again and choose more files (say from a different folder) it deletes the currently selected files. Is there any way to have the newly selected set of files not overwrite the old set?

Upvotes: 3

Views: 2381

Answers (2)

Zarjio
Zarjio

Reputation: 1137

Although I'm not sure about HTML5, prior versions of JS will not let you do this, for security reasons. You can't change the files that the user has chosen to upload, or else you could change the file path and upload whatever files you wanted from their hard drive (including password files, for example).

One solution to this is to have multiple file inputs, rather than a single one that takes multiple files. Add them dynamically as the user selects files to upload. For example, you could add an onchange listener to the newest file input, and when the user has selected a file, remove the listener, and then add another file input (attaching the onchange listener to this new file input). Of course, you'll need some sort of incremental naming scheme for these inputs, and your server will need to deal with the resulting upload.

Upvotes: 1

totten
totten

Reputation: 2817

Yes, there is a way which I used.

Listen this; when user selects files, hide this input with CSS and generate another input with different name. You will need an information how many of them there, for such a reason you can add a hidden input with initial value 1, and you can +1 each time.

Hope this helps.

Upvotes: 0

Related Questions