FileReader: result property

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.

Theresult read-only property of theFileReader interface returns thefile's contents. This property is only valid after the read operation is complete, andthe format of the data depends on which of the methods was used to initiate the readoperation.

Value

An appropriate string orArrayBuffer based on which of the reading methodswas used to initiate the read operation. The value isnull if the readingis not yet complete or was unsuccessful.

The result types are described below.

Method	Description
`readAsArrayBuffer()`	The`result` is a JavaScript`ArrayBuffer` containing binary data.
`readAsBinaryString()`	The`result` contains the raw binary data from the file in a string.
`readAsDataURL()`	The`result` is a string with a`data:` URL representing the file's data.
`readAsText()`	The`result` is text in a string.

Examples

This example presents a functionreader() which reads a file from afile input. It works by creating aFileReader object and creating a listener forload events, such that when then file is read, theresult is obtained and passed to the callback function provided toreader().

The content is handled as raw text data.

// Given this HTMLInputElement of type="file":// <input type="file" accept="image/*">function reader(file, callback) {  const fr = new FileReader();  fr.onload = () => callback(null, fr.result);  fr.onerror = (err) => callback(err);  fr.readAsDataURL(file);}document.querySelector("#image").addEventListener("change", (evt) => {  // No files, do nothing.  if (!evt.target.files) {    return;  }  reader(evt.target.files[0], (err, res) => {    console.log(res); // Base64 `data:image/...` String result.  });});

Given the asynchronous nature ofFileReader, you could use a Promise-based approach. Here's an example for afile input with attributemultiple that returns aPromise.

// Given this HTMLInputElement:// <input type="file" accept="image/*" multiple>const reader = (file) =>  new Promise((resolve, reject) => {    const fr = new FileReader();    fr.onload = () => resolve(fr);    fr.onerror = (err) => reject(err);    fr.readAsDataURL(file);  });async function logImagesData(fileList) {  let fileResults = [];  const frPromises = fileList.map(reader);  try {    fileResults = await Promise.all(frPromises);  } catch (err) {    // In this specific case, Promise.all() might be preferred    // over Promise.allSettled(), since it isn't trivial to modify    // a FileList to a subset of files of what the user initially    // selected. Therefore, let's just stash the entire operation.    console.error(err);    return;  }  fileResults.forEach((fr) => {    console.log(fr.result); // Base64 `data:image/...` String result.  });}// HTMLInputElement type="file" Event handler:document.querySelector("#images").addEventListener("change", (evt) => {  // If no files, do nothing.  if (!evt.target.files) {    return;  }  logImagesData([...evt.target.files]);});