FileReader

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

Note: This feature is available inWeb Workers.

TheFileReader interface lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, usingFile orBlob objects to specify the file or data to read.

File objects may be obtained from aFileList object returned as a result of a user selecting files using the<input type="file"> element, or from a drag and drop operation'sDataTransfer 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 theFile System Access API. To read server-side files, usefetch(), withCORS permission if reading cross-origin.

Constructor

FileReader(): Returns a newFileReader object.

SeeUsing files from web applications for details and examples.

Instance properties

FileReader.errorRead only

ADOMException representing the error that occurred while reading the file.

FileReader.readyStateRead only

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

Name	Value	Description
`EMPTY`	`0`	No data has been loaded yet.
`LOADING`	`1`	Data is currently being loaded.
`DONE`	`2`	The entire read request has been completed.

FileReader.resultRead only

The file's contents. This property is only valid after the read operation is complete, and the format of the data depends on which of the methods was used to initiate the read operation.

Instance methods

FileReader.abort(): Aborts the read operation. Upon return, thereadyState will beDONE.
FileReader.readAsArrayBuffer(): Starts reading the contents of the specifiedBlob, once finished, theresult attribute contains anArrayBuffer representing the file's data.
FileReader.readAsBinaryString()Deprecated: Starts reading the contents of the specified Blob, once finished, theresult attribute contains the raw binary data from the file as a string.
FileReader.readAsDataURL(): Starts reading the contents of the specifiedBlob, once finished, theresult attribute contains adata: URL representing the file's data.
FileReader.readAsText(): Starts reading the contents of the specifiedBlob, once finished, theresult attribute contains the contents of the file as a text string. An optional encoding name can be specified.

Events

Listen to these events usingaddEventListener() or by assigning an event listener to theoneventname property of this interface. Remove the event listeners withremoveEventListener(), onceFileReader is no longer used, to avoid memory leaks.

abort: Fired when a read has been aborted, for example because the program calledFileReader.abort().
error: Fired when the read failed due to an error.
load: Fired when a read has completed successfully.
loadend: Fired when a read has completed, successfully or not.
loadstart: Fired when a read has started.
progress: Fired periodically as data is read.

Examples

Using FileReader

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

HTML

html

<h1>File Reader</h1><input type="file" /><div></div><pre></pre>

JavaScript

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 userfunction showMessage(message, type) {  messageDisplay.textContent = message;  messageDisplay.style.color = type === "error" ? "red" : "green";}