The FileReader interface lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.

File objects may be obtained from a FileList object returned as a result of a user selecting files using the <input type="file"> element, or from a drag and drop operation's DataTransfer object. FileReader can only access the contents of files that the user has explicitly selected; it cannot be used to read a file by pathname from the user's file system. To read files on the client's file system by pathname, use the File System Access API . To read server-side files, use fetch() , with CORS permission if reading cross-origin.

A DOMException representing the error that occurred while reading the file.

A number indicating the state of the FileReader . This is one of the following:

Aborts the read operation. Upon return, the readyState will be DONE .

Starts reading the contents of the specified Blob , once finished, the result attribute contains an ArrayBuffer representing the file's data.

Starts reading the contents of the specified Blob , once finished, the result attribute contains a data: URL representing the file's data.

Starts reading the contents of the specified Blob , once finished, the result attribute contains the contents of the file as a text string. An optional encoding name can be specified.

Events

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface. Remove the event listeners with removeEventListener() , once FileReader is no longer used, to avoid memory leaks.

Fired when a read has been aborted, for example because the program called FileReader.abort() .

Fired when the read failed due to an error.

Fired when a read has completed successfully.

Fired when a read has completed, successfully or not.

Fired when a read has started.

Fired periodically as data is read.

Examples

Using FileReader

This example reads and displays the contents of a text file directly in the browser.

<h1>File Reader</h1>
<input type="file" id="file-input" />
<div id="message"></div>
<pre id="file-content"></pre>
JavaScript
js
const fileInput = document.getElementById("file-input");
const fileContentDisplay = document.getElementById("file-content");
const messageDisplay = document.getElementById("message");
fileInput.addEventListener("change", handleFileSelection);
function handleFileSelection(event) {
  const file = event.target.files[0];
  fileContentDisplay.textContent = ""; // Clear previous file content
  messageDisplay.textContent = ""; // Clear previous messages
  // Validate file existence and type
  if (!file) {
    showMessage("No file selected. Please choose a file.", "error");
    return;
  if (!file.type.startsWith("text")) {
    showMessage("Unsupported file type. Please select a text file.", "error");
    return;
  // Read the file
  const reader = new FileReader();
  reader.onload = () => {
    fileContentDisplay.textContent = reader.result;
  reader.onerror = () => {
    showMessage("Error reading the file. Please try again.", "error");
  reader.readAsText(file);
// Displays a message to the user
function showMessage(message, type) {
  messageDisplay.textContent = message;
  messageDisplay.style.color = type === "error" ? "red" : "green";
    
Result

    
Specifications

        Specification
          Learn how to contribute 

    This page was last modified on ⁨Jun 23, 2025⁩ by MDN contributors.
    View this page on GitHub • Report a problem with this content
      
File API
FileReader
Constructor
FileReader()
Instance properties
error
readyState
result
Instance methods
abort()
readAsArrayBuffer()
readAsBinaryString()
Deprecated
readAsDataURL()
readAsText()
Events
abort
error
load
loadend
loadstart
progress
Inheritance
EventTarget
Related pages for File API
Blob
File
FileList
FileReaderSync
URL.createObjectURL
URL.revokeObjectURL
Guides
Using files from web applications