Sometimes, we want to retrieve file names out of a multi-file upload control with JavaScript.

In this article, we’ll look at how to retrieve file names out of a multi-file upload control with JavaScript.

How to retrieve file names out of a multi-file upload control with JavaScript?

To retrieve file names out of a multi-file upload control with JavaScript, we can get them from the change event’s files property.

For instance, we write:

<input type='file' multiple>

to add a file input that accepts multiple files.

Next, we write:

const input = document.querySelector("input");
input.onchange = (e) => {
  for (const f of e.target.files) {
    console.log(f.name)
  }
}

to select the file input with querySelector.

Then we set the input.onchange property to add a change event handler to the file input.

In it, we loop through the selected files with e.target.files with the for-of loop.

And then we get the file name of the selected file with f.name.

Conclusion

To retrieve file names out of a multi-file upload control with JavaScript, we can get them from the change event’s files property.