The **file reader** is a JavaScript object that is used to read files stored in a computer. It does this asynchronously, meaning that the application does not block while a file is being​ read.

The file reader can create various representations of the file being read, but the desired representation must be specified by calling the appropriate method. For instance,

* the `readAsText()` method should be called when a file needs to be read as plain text.

* the `readAsDataUrl()` method should be used to encode a file in a string that can be used as a URL.

Since the file reader can read files asynchronously, it has some events that can be listened for. These include:

* `load`, it is fired when a read has finished successfully.
* `error`, it is fired when an error occurs during a read.

<br>

# Example

**Reading a file as plain text**

1. A `FileReader()` object is created.
2. The `readAsText()` method is called because the file needs to be read as plain text.
3. A function is created that will be called when the `onload` event fires. In this case, the content of the file is being printed.
4. A function is created that will be called when the `error` event fires. In this case, the error will be printed on the console.
<br>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <input type="file" />
  
  <script>
        const filename = document.querySelector('input[type="file"]');
        filename.addEventListener('change', function (){
        // Creating a FileReader object using the constructor.
        const filereader = new FileReader();
        // Reading a file as plain text
        filereader.readAsText(filename.files[0]);
        // Call this function to print the contents of the file
        // once the file has been read.
        filereader.onload = function {
            console.log(filereader.result);
        };
        // Print the error incase there is one
        filereader.onerror = function {
            console.log("Error: ", filereader.error);
        };
},false);
  </script>
</body>
</html>

const filename = document.querySelector('input[type="file"]');
filename.addEventListener('change', (e) => {
    const filereader = new FileReader()
    filereader.onload = () => {
        console.log(filereader.result);
    }
    filereader.readAsText(filename.files[0])
},false)


codemirror

console

What is the JavaScript file reader?

JavaScript’s FileReader reads files asynchronously, offering various representations and events for success or error monitoring.