Javascript get number of files and their filenames from file input element with multiple attribute?

Question

I have a file input with the multiple="multiple" attribute to allow users to select multiple files at once. I would like to display selected file names and their count prior to upload however I'm not sure how to get this information from file input element using javascript?

<input type="file" id="fileElementId" name="files[]" size="20" multiple="multiple" />

I've tried this:

document.getElementById('fileElementId').value

But this only returns one file name when I select multiple files. Using JavaScript is how do I retrieve the number of selected files and their names from a file input element with a multiple attribute?

Answer 1

In new browsers that support the HTML5 file stuff, your <input> element will have a "files" property. That will give you a "FileList" reference, which has a ".length" property. There's also an access method called ".item()" on the "FileList" instance, and it takes an integer arg to access individual "File" elements. Those have a ".name" property.

So:

var inp = document.getElementById('fileElementId');
for (var i = 0; i < inp.files.length; ++i) {
  var name = inp.files.item(i).name;
  alert("here is a file name: " + name);
}

This will of course not work in older IE versions, and I'm not even sure how thorough the Safari and Chrome support is; however, if you're writing pages with "multiple" set on your file inputs you're already dancing on the edge :-)