FileReader: result property
===========================

**Note:** This feature is available in Web Workers

 The **`result`** read-only property of the `FileReader` interface returns 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.

Value
-----

 An appropriate string or `ArrayBuffer` based on which of the reading methods
 was used to initiate the read operation. The value is `null` if the reading
 is 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 function `reader()` which reads a file from a file input. It works by creating a `FileReader` object and creating a listener for `load` events, such that when then file is read, the `result` is obtained and passed to the callback function provided to `reader()`.

The content is handled as raw text data.


```js
// Given this HTMLInputElement of type="file":
// <input id="image" 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 of `FileReader`, you could use a Promise-based approach. Here's an example for a file input with attribute `multiple` that returns a `Promise`.


```js
// Given this HTMLInputElement:
// <input id="images" 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]);
});
```

Specifications
--------------

| Specification |
| --- |
| File API # dom-filereader-result |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `FileReader`