HTML5 / JS - Display multiple file input in div

Question

I am using HTML5's wonderful 'multiple' file select feature.

<input type="file" id="fileInput" onChange="runTest()" multiple>

I would like to display the selected filenames below the input field and make it look pretty with CSS, however...

If I run a test JS function, that 'alerts' me of the input field's value, it only shows one file regardless of me selecting 10.

function runTest() {
var fileInput = document.getElementById('fileInput').value;
alert("You selected: "+fileInput);
}

I was doing this for when I had a 'single' file input field and worked okay but now it's 'multiple', it doesn't like it.

Any suggestions?

Answer 1

Well, it seems the value, or val(), returned by the element is the name of only the last file selected. To work around this, it might be wise to use the nature of the multiple-change events:

$('input:file[multiple]').change(
    function(){
        $('ul').append($('<li />').text($(this).val()));
    });

JS Fiddle demo.

And either output the names to a list (as in the example), or append the latest value to an array, or, possibly, use/create hidden inputs to store the filenames as you feel would best suit your application.

To access the file-names (as well as last modified date, file-size...) you can (tested in Chromium 12/Ubuntu 11.04) use the following:

$('input:file[multiple]').change(
    function(e){
        console.log(e.currentTarget.files);
    });

JS Fiddle demo.

---

Edited to make the above slightly more useful and, hopefully, demonstrative:

$('input:file[multiple]').change(
    function(e){
        console.log(e.currentTarget.files);
        var numFiles = e.currentTarget.files.length;
            for (i=0;i<numFiles;i++){
                fileSize = parseInt(e.currentTarget.files[i].fileSize, 10)/1024;
                filesize = Math.round(fileSize);
                $('<li />').text(e.currentTarget.files[i].fileName).appendTo($('#output'));
                $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last'));
            }
    });

JS Fiddle demo.

The final code-block updated, due to changes in Webkit, Chrome 24 (though possibly from earlier), by nextgentech in comments, below:

$('input:file[multiple]').change(
    function(e){
        console.log(e.currentTarget.files);
        var numFiles = e.currentTarget.files.length;
            for (i=0;i<numFiles;i++){
                fileSize = parseInt(e.currentTarget.files[i].size, 10)/1024;
                filesize = Math.round(fileSize);
                $('<li />').text(e.currentTarget.files[i].name).appendTo($('#output'));
                $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last'));
            }
    });

JS Fiddle demo.

Answer 2

Set a break point on the alert call and take a look at the contents of the variable fileInput, see if there is another property that contains all of the file names.

Answer 3

Excellent code but object needs to be empty for each change:

$('input:file[multiple]').change(
function(e){
    $('#output').empty();
    console.log(e.currentTarget.files);
    var numFiles = e.currentTarget.files.length;
        for (i=0;i<numFiles;i++){
            fileSize = parseInt(e.currentTarget.files[i].fileSize, 10)/1024;
            filesize = Math.round(fileSize);
            $('<li />').text(e.currentTarget.files[i].fileName).appendTo($('#output'));
            $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last'));
        }
});

Thank you David...