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.

A very simple solution:

Watch a course JavaScript -The Complete Guide (Beginner + Advanced) 

<!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() {
        fileName = document.querySelector('#chooseFile').value;
        extension = fileName.split('.').pop();
        document.querySelector('.output').textContent = extension;
      };
    </script>
  </body>
</html>

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

<!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() {
        fileName = document.querySelector('#chooseFile').value;
        extension = fileName.substring(fileName.lastIndexOf('.') + 1);
        document.querySelector('.output').textContent = extension;
      };
    </script>
  </body>
</html>

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

Javascript get file extension using split method
function getExtension(path) { let baseName = path.split(/[\\/]/).pop(), // extracts file name from full path // (supports separators `\\` and `/`) pos = baseName.lastIndexOf("."); // gets the last position of `.` if (baseName === "" || pos < 1) // if the file name is empty or ... return ""; // the dot not found (-1) or comes first (0) return baseName.slice(pos + 1); // extracts extension ignoring "." } console.log(getExtension("/path/to/fileName.ext")); // "ext"

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

<!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() {
        fileName = document.querySelector('#chooseFile').value;
        extension = fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);
        document.querySelector('.output').textContent = extension;
      };
    </script>
  </body>
</html>

Here is another one-line 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() {
        fileName = document.querySelector('#chooseFile').value;
        extension = fileName.slice((Math.max(0, fileName.lastIndexOf(".")) || Infinity) + 1);
        document.querySelector('.output').textContent = extension;
      };
    </script>
  </body>
</html>

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 method.
The given extended method is slower than the two one-liners above; however, the extended one is much easier to catch.