The FileReader
result
property 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.
The FileReader
result
property 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.
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. |
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]); });
Specification |
---|
File API # dom-filereader-result |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
result |
6 | 12 | 3.6 | 10 | 11 | 6 | 3 | 18 | 32 | 11 | 6 | 1.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/result