Sometimes, we want to extract filename from a file input control with JavaScript.

In this article, we’ll look at how to extract filename from a file input control with JavaScript.

How to extract filename from a file input control with JavaScript?

To extract filename from a file input control with JavaScript, we can get the file name with the name property.

For instance, we write

document.getElementById("imgName").onchange = (e) => {
  const [file] = e.target.files;
  const filename = file.name;
  //...
};

to get the file input with

document.getElementById("imgName")

Then we assign the onchange property to a function that gets the files select with e.target.files.

And then we get the first file with destructuring.

Then we get the file’s name with file.name.

Conclusion

To extract filename from a file input control with JavaScript, we can get the file name with the name property.