HTML: select multiple files but no file names show

Question

I am using "multiple" tag to let user choose multiple files for uploading.

<input type="file" name="files[]" multiple />

But it only shows e.g., "3 files selected". It would be better to also show file names.

Is it doable? Thanks.

BTW, in this case how to deselect files (e.g., clear the list)?

Answer 1

You can do this with the .files property on the input element:

document.getElementById('files').addEventListener('change', function(e) {
  var list = document.getElementById('filelist');
  list.innerHTML = '';
  for (var i = 0; i < this.files.length; i++) {
    list.innerHTML += (i + 1) + '. ' + this.files[i].name + '\n';
  }
  if (list.innerHTML == '') list.style.display = 'none';
  else list.style.display = 'block';
});

<input type="file" id="files" multiple />
<pre id="filelist" style="display:none;"></pre>

This first empties the list in case there's still something from the previous selection, and then it goes through each item in the file list, and then adds that to the <pre> element underneath the input. The <pre> will be hidden if there are no selected items in the list.

PS: you can clear the list by just clicking the input, and then either pressing esc or clicking "cancel" on the file-selection window.