JavaScript File and FileReader

Let’s explore File and FileReader in JavaScript.

As a rule, a file object inherits from the Blob. It can be extended to filesystem-related facilities.

You can obtain it in two ways:

  • The first way is using a constructor similar to Blob:
    new File(fileParts, fileName, [options])
  • As a rule, a file can be received from <input type="file">, or drag and drop or other browser interfaces. In this situation, the file receives information from OS.

The file objects have the same properties as Blob. But, they also have some additional properties such as the name (the file name) and the lastModified(last modification timestamp).

Let’s see how the File object can be received from <input type="file">:

<!DOCTYPE html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    <input onchange="showFile(this)" type="file">
    <script>
      function showFile(input) {
        let file = input.files[0];
        alert(`File name: ${file.name}`); 
        alert(`Last modified: ${file.lastModified}`);
      }
    </script>
  </body>
</html>

FileReader

The purpose of the fileReader is to read data from Blob objects. It provides data with the usage of events because reading from disk might take long.

The constructor of the FileReader is the following:

let fileReader = new FileReader(); // not a arguments

Its primary methods are as follows:

  • readAsArrayBuffer(blob) – reading data in binary format ArrayBuffer.
  • readAsText(blob, [encoding]) – reading the data like a text string with particular encoding (utf-8 by default).
  • readAsDataURL(blob) – reading the binary data and encoding that as base64 data url.
  • abort() – canceling the action.

The events that can trigger during the process of reading are the following:

  • loadstart
  • progress
  • load
  • abort
  • error
  • loadend

After the reading is over, the result can be accessed in this way:

  • The result is reader.result.
  • The error is reader.error.

The error and load are the most commonly used events.

An example of reading a file will look as follows:

<!DOCTYPE html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    <input onchange="readFile(this)" type="file">
    <script>
      function readFile(input) {
        let file = input.files[0]; 
        let fileReader = new FileReader(); 
        fileReader.readAsText(file); 
        fileReader.onload = function() {
          alert(fileReader.result);
        }; 
        fileReader.onerror = function() {
          alert(fileReader.error);
        }; 
      }
    </script>
  </body>
</html>

Use the text inside the file in an element

You can use the fileReader.result to use the content of your file whenever you wish to.
<!DOCTYPE html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    <input onchange="readFile(this)" type="file">
    <p id="result"></p>
    <script>
      function readFile(input) {
        let file = input.files[0]; 
        let fileReader = new FileReader(); 
        fileReader.readAsText(file); 
        fileReader.onload = function() {
          document.getElementById("result").innerText = fileReader.result
        }; 
        fileReader.onerror = function() {
          alert(fileReader.error);
        }; 
      }
    </script>
  </body>
</html>

Summary

File objects use the methods and properties of Blob. But, they have additional properties such as name and lastModified. File objects are usually received from user input such as <input> or Drag and drop events.

FileReader objects are capable of reading from a file or a blob, in one of the formats below:

  • String
  • ArrayBuffer
  • Data URL, base-64 encoded.

Practice Your Knowledge

What are the functionalities of File and FileReader interfaces in JavaScript?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?