FileReader

Constructor

FileReader()

Returns a new FileReader object.

See Using files from web applications for details and examples.

Instance properties

FileReader.error Read only

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

FileReader.readyState Read only

A number indicating the state of the FileReader. 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.result Read 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, the readyState will be DONE.

FileReader.readAsArrayBuffer()

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

FileReader.readAsBinaryString() Deprecated

Starts reading the contents of the specified Blob, once finished, the result attribute contains the raw binary data from the file as a string.

FileReader.readAsDataURL()

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

FileReader.readAsText()

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.

abort

Fired when a read has been aborted, for example because the program called FileReader.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

<h1>File Reader</h1>
<input type="file" id="file-input" />
<div id="message"></div>
<pre id="file-content"></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 user
function showMessage(message, type) {
  messageDisplay.textContent = message;
  messageDisplay.style.color = type === "error" ? "red" : "green";
}

Result

Specifications

Browser compatibility

See also

• Using files from web applications
• File
• Blob
• FileReaderSync