How to Get File Extensions with JavaScript

The file extension is the ending of a file which helps you identify the type of file in different operating systems. In the scope of this tutorial, we will discuss how you can get file extension with JavaScript. Here we suggest some one-line and extended solutions for you.

Note: The simple split and substring methods below do not handle dot-prefixed files (e.g., .htaccess) correctly. For robust handling, see the extended solution later in this tutorial.

A very simple solution:

Javascript get file extension using split method

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    <h2>Select a file and click on the button to check the file extension.</h2>
    <div>
      <input type="file" id="chooseFile" />
      <input type="button" value="Check Extension" onclick="checkFileExtension();" />
    </div>
    <h3>
      The file extension is a: 
      <p class="output"></p>
    </h3>
    <script>
      function checkFileExtension() {
        let fileName = document.querySelector('#chooseFile').value;
        let extension = fileName.split('.').pop();
        document.querySelector('.output').textContent = extension;
      };
    </script>
  </body>
</html>

Try it Yourself »

Here is a non-regex solution that will work fine:

Javascript get file extension using substring method non-regex solution

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    <h2>Select a file and click on the button to check the file extension.</h2>
    <div>
      <input type="file" id="chooseFile" />
      <input type="button" value="Check Extension" onclick="checkFileExtension();" />
    </div>
    <h3>
      The file extension is a: 
      <p class="output"></p>
    </h3>
    <script>
      function checkFileExtension() {
        let fileName = document.querySelector('#chooseFile').value;
        let extension = fileName.substring(fileName.lastIndexOf('.') + 1);
        document.querySelector('.output').textContent = extension;
      };
    </script>
  </body>
</html>

Try it Yourself »

A clear solution with extra full path support, here is an extended version:

Javascript get file extension using split method

javascript— editable

Another fast solution which is short enough to be used in bulk operations, and definitely will save extra bytes:

Javascript get file extension using slice method

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    <h2>Select a file and click on the button to check the file extension.</h2>
    <div>
      <input type="file" id="chooseFile" />
      <input type="button" value="Check Extension" onclick="checkFileExtension();" />
    </div>
    <h3>
      The file extension is a: 
      <p class="output"></p>
    </h3>
    <script>
      function checkFileExtension() {
        let fileName = document.querySelector('#chooseFile').value;
        let extension = fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);
        document.querySelector('.output').textContent = extension;
      };
    </script>
  </body>
</html>

Try it Yourself »

Here is another one-line non-regexp solution:

Javascript get file extension using slice method non-regexp solution

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    <h2>Select a file and click on the button to check the file extension.</h2>
    <div>
      <input type="file" id="chooseFile" />
      <input type="button" value="Check Extension" onclick="checkFileExtension();" />
    </div>
    <h3>
      The file extension is a: 
      <p class="output"></p>
    </h3>
    <script>
      function checkFileExtension() {
        let fileName = document.querySelector('#chooseFile').value;
        let extension = fileName.slice((Math.max(0, fileName.lastIndexOf(".")) || Infinity) + 1);
        document.querySelector('.output').textContent = extension;
      };
    </script>
  </body>
</html>

Try it Yourself »

These two one-liners work correctly with names that have no extension, for example myfile, or start with dot (.), for example .htaccess:

"" --> ""
"name" --> ""
"name.txt" --> "txt"
".htpasswd" --> ""
"name.with.many.dots.myext" --> "myext"

The String.lastIndexOf method returns the last position of the substring (".") in the given string fname. The method will return -1 if the substring is not found.
The "unacceptable" positions of the dot in the filename are -1 and 0, which refer to names with no extension ( "name") and to names that start with a dot (".htaccess").
The String.prototype.slice method takes out the part of the filename from the position that was calculated. The method will return "", if the position number is more than the length of the string.

Info

The given extended method is slower than the two one-liners above; however, the extended one is much easier to read.