Retrieving file names out of a multi-file upload control with javascript

Question

The HTML is:

<input type="file" multiple="multiple" name="upload" id="id_upload" />

If I load up three files, document.getElementById("id_upload").value only returns a single file name and not an array of three names or comma separated string of three names. Same story with jQuery val(). Is there a way to get the whole list?

Answer 1

Use the .files property of that element:

var elem = document.getElementById("id_upload");
var names = [];
for (var i = 0; i < elem.files.length; ++ i) {
   names.push(elem.files[i].name);
}

Reference:

• Input.multiple — MDC
• File — MDC