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.
