Get File Name with JavaScript

In this article, you will learn how to get file name with JavaScript.

Get the local file name

A new “File API” has been added from HTML5 to work with local files.
With this API, you can open a local file or send it to a server with very simple code.

Get the file name of the access destination

Get the information by specifying “file” in the type attribute of the input tag as shown below.

<input id="file" name="file" type="file" />

The information that can be obtained is:

• name : file name
• type : MIME type of file
• size : file size
• lastModifiedDate : file modification date

If you want to get the contents of the file, use “FileReader API”.

Sample Code

Below is the sample code to get the information of the specified file.

HTML

<input id="file" name="file" type="file" />

JavaScript

window.addEventListener('DOMContentLoaded', function() {
  document.querySelector("#file").addEventListener('change', function(e) {

    // Check if the browser can use the File API
    if (window.File) {
      // Get information about the specified file
      var input = document.querySelector('#file').files[0];

      // file name
      console.log(input.name);

      // MIME type of file
      console.log(input.type);

      // file size
      console.log(input.size);

      // file modification date
      console.log(input.lastModifiedDate);
    }
  }, true);
});