Input type FILE multiple - add files sequentially

Question

I am developing a page (one-time use - its registration page) when a visitor opens dialog box and uploads files throught input type file multiple. All worked fine, but my client just told me they want to be able to upload multiple files from different directories. By opening that dialog more times.

Now, normally what happens is that when I open file select dialog another time, the previously selected files got removed from the input.

Is there any way (pure HTML or JS) that I could add the possibility to "stack" files - add them to the selection (maybe some JS object later converted back to input type file?) so that files can be added to the list of files in the input?

Solution 1

I would say that you have two options here.

Stick to classic form

If you want to keep the classic form logic, you will have to add more file inputs to keep your old selections. A short script will look like :

$('input[type="file"]').on('change', function() { $(this).append('<input type="file" name="file[]"/>') });

So to add more files, the user can click on the next file input. You can then enhance it to make it nicer with design stuff and remove functionality.

The HTML5 way

While the previous idea is simple, I think it lacks of design and user friendliness. So the other idea is a more advance way, which will need a bit more of work but will let you do what you want and more (You could add drag/drop for instance).

So the basic idea is that when the user select a file, you will get the file in Javascript, you can do it by using the FileReader object. When you have the file content, you can just queue it on a variable.

var queue = [];

function addFile(event) {
    var files = event.target.files, i = 0, j = files.length, file, reader;

    reader = new FileReader();
    reader.onloadend = function () {
        queue.push{ reader.result };
    };

    for (i = 0; i < j; i += 1) {
        file = files[i];
        reader.readAsBinaryString(file);
    }
}

Note that If you want to keep the select dialog, you will need to keep the file input.

Once your user valid the form, you should send your other inputs first by Ajax (you want to stay on the page, or you'll have to store your files like in the localStorage which I think is a bad idea). Then you'll have to send your file to the server using Ajax requests as well, it's easy as just sending the file bits to the server. And on your server you will have to get those bits and simply put it on a file (If you have a specific language for the server part we can extend on how doing it).

You can go then further that way and have the possibility to get the progress of the upload, cancel an upload, slice your files if you have size limitation, do drag and drop,...

Of course, you will to considerate that some browsers have some issues with this object, but it tend to be good everywhere.

Solution 2

Note on the "classic form"/JQuery solution given by Gregoire: this will not work on the newly added inputs, as the listener is not active on them. If you modify this to use delegated events you have a working clean solution:

<div id="files">
    <input type="file" name="file[]" />
</div>

$("#files").on("change", "input", function(event){
    $('#files').append('<input type="file" name="file[]"/>')
});