List selected files from file input

Question

I want to list selected file from file input.

  <div class="fileUpload myButton">
    <span>Upload</span>
    <input type="file" name="imageURL[]" id="imageURL" multiple="" class="file" />
  </div>
    <div id="file-list">
  </div>

I have this code

(function () {
var filesUpload = document.getElementById("imageURL"),z
    fileList = document.getElementById("file-list");

function uploadFile (file) {
    var li = document.createElement("li"),
        div = document.createElement("div"),            
        reader,
        xhr,
        fileInfo;

    li.appendChild(div);

    // Present file info and append it to the list of files
    fileInfo = "<div class=\"neutral\">File: <strong>" + file.name + "</strong> with the size <strong>" + parseInt(file.size / 1024, 10) + "</strong> kb is in queue.</div>";
    div.innerHTML = fileInfo;

    fileList.appendChild(div);
}

function traverseFiles (files) {
    if (typeof files !== "undefined") {
        for (var i=0, l=files.length; i<l; i++) {
            uploadFile(files[i]);
        }
    }
    else {
        fileList.innerHTML = "<div class=\"neutral\">Your browser does not support Multiple File Upload, but you can still upload your file. We recommend you to upload to a more modern browser, like <a href=\"http://google.com/chrome\" target=\"_blank\">Google Chrome</a> for example.<div>";
    }   
}

filesUpload.addEventListener("change", function () {
    traverseFiles(this.files);
}, false);


     })();

But the problem is when the user selects another files it is added to the list but the old files is not uploaded when the form is submitted.

---

Simplified: when the user selects file1.pdf and file2.pdf The list shows file1.pdf and file2.pdf When he selects again another files file3.pdf and file4.pdf the list shows file1.pdf , file2.pdf, file3.pdf and file4.pdf But when he submit the form only file3.pdf and file4.pdf is uploaded

My question is how to remove the files which will not be uploaded from the list. OR a way to upload all the files in the list. Thanks in advance.

Answer 1

What is happening is that the input is emptied when selecting more files, hence not uploading the previously displayed files.

SOLUTION 1: To combat this you could create a new input in the change event handler, although this could get quite messy. You would have to get all files from all the inputs on upload. You have not shown your actual upload code, so I cannot give an example in context:

filesUpload.on("change", function () {
    traverseFiles(this.files); //Add initial files to list
    create_new_input();
}
function create_new_input() {
    var new_input = $('<input type="file" />'); //create file selector
    new_input.on("change", function() {traverseFiles($(this).get(0).files);}); //
    $('body').append(new_input); //Add this input to your page
}, false);

You will have to add all files that you receive in the traverseFilesto the xhr. This example uses jQuery, and I would recommend that you use it all the time!

SOLUTION 2: Other wise you can empty the file list box on input changed:

filesUpload.addEventListener("change", function () {
    document.getElementById('file-list').innerHTML = "";
    traverseFiles(this.files);
}, false);

Good luck!