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?

score 7 · Accepted Answer · edited May 23 '17 at 12:34

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.

Thanks David, I used this but still didn't manage to get it to produce all files, weird. I have actually just read an article on HTML5 (http://www.html5rocks.com/en/tutorials/file/dndfiles/) which if applied, would be much better for me. Without doubt thou', your code actually helped me with another issue I was having elsewhere, so thanks... — TheCarver, Oct 10 '11 at 23:00
Really? It worked consistently in Chromium, albeit that's no guarantee of other browsers' behaviour. Anyway, I'm glad to have been of (some) help, if I get a chance I'll try and look further into this. — David Thomas, Oct 11 '11 at 06:35
[Updated Fiddle](http://jsfiddle.net/dlong500/LZLBn/61/) to account for Chrome/Chromium changes in file attributes (fileSize is now **size**, fileName is now **name**) as of at least v24 (possibly earlier). — nextgentech, Jan 27 '13 at 12:39
I can see a potential problem with the above, are the listed file still form submission elements when you re-select new files with the fileuploader? — David, Apr 24 '14 at 14:57
it would be nice if you could also put (X) sign to remove some of the selected files. — Sukhdevsinh Zala, Nov 19 '14 at 07:42

score 0 · Answer 2 · answered Oct 24 '13 at 19:12

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...

how to remove a selected file? – Sukhdevsinh Zala Nov 19 '14 at 07:54 — Sukhdevsinh Zala, Nov 19 '14 at 07:54

score 0 · Answer 3 · answered Oct 10 '11 at 22:13

0

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.

answered Oct 10 '11 at 22:13

Jason Miesionczek

14,268
17
76
108

HTML5 / JS - Display multiple file input in div

3 Answers3

Linked