The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
File objects may be obtained from a FileList object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.
Constructor
FileReader()- Returns a newly constructed
FileReader.
See Using files from web applications for details and examples.
Properties
FileReader.errorRead only- A
DOMExceptionrepresenting the error that occurred while reading the file. FileReader.readyStateRead only- A number indicating the state of the
FileReader. This is one of the following:EMPTY0No data has been loaded yet. LOADING1Data is currently being loaded. DONE2The 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.
Event handlers
FileReader.onabort- A handler for the
abortevent. This event is triggered each time the reading operation is aborted. FileReader.onerror- A handler for the
errorevent. This event is triggered each time the reading operation encounter an error. FileReader.onload- A handler for the
loadevent. This event is triggered each time the reading operation is successfully completed. FileReader.onloadstart- A handler for the
loadstartevent. This event is triggered each time the reading is starting. FileReader.onloadend- A handler for the
loadendevent. This event is triggered each time the reading operation is completed (either in success or failure). FileReader.onprogress- A handler for the
progressevent. This event is triggered while reading aBlobcontent.
As FileReader inherits from EventTarget, all those events can also be listened for by using the addEventListener method.
Methods
FileReader.abort()- Aborts the read operation. Upon return, the
readyStatewill beDONE. FileReader.readAsArrayBuffer()- Starts reading the contents of the specified
Blob, once finished, theresultattribute contains anArrayBufferrepresenting the file's data. FileReader.readAsBinaryString()- Starts reading the contents of the specified
Blob, once finished, theresultattribute contains the raw binary data from the file as a string. FileReader.readAsDataURL()- Starts reading the contents of the specified
Blob, once finished, theresultattribute contains adata:URL representing the file's data. FileReader.readAsText()- Starts reading the contents of the specified
Blob, once finished, theresultattribute contains the contents of the file as a text string.
Specifications
| Specification | Status | Comment |
|---|---|---|
| File API The definition of 'FileReader' in that specification. |
Working Draft | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 7 | Yes | 3.61 | 10 | 11 | 6 |
| Available in workers | Yes | Yes | 46 | No | 11 | No |
abort | 7 | Yes | 3.6 | 10 | 11 | 6 |
error | 7 | Yes | 3.62 3 4 | 106 | 11 | 66 |
onabort | 7 | Yes | 3.6 | 10 | 11 | 6 |
onerror | 7 | Yes | 3.6 | 10 | 11 | 6 |
onload | 7 | Yes | 3.6 | 10 | 11 | 6 |
onloadend | 7 | Yes | 3.6 | 10 | 11 | 6 |
onprogress | 7 | Yes | 3.6 | 10 | 11 | 6 |
readyState | 7 | Yes | 3.6 | 10 | 11 | 6 |
readAsArrayBuffer | 7 | Yes | 3.6 | 10 | 12 | 6 |
readAsBinaryString | 7 | Yes | 3.6 | 10 | 11 | 6 |
readAsDataURL | 7 | Yes | 3.6 | 10 | 11 | 6 |
readAsText | 7 | Yes | 3.6 | 10 | 11 | 6 |
result | 7 | Yes | 3.6 | 10 | 11 | 6 |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | ? | Yes | Yes | 32 | 11 | 6.1 | ? |
| Available in workers | Yes | Yes | Yes | 46 | 11 | No | ? |
abort | ? | Yes | Yes | 32 | 11 | 6.1 | ? |
error | ? | Yes | Yes | 324 5 | 11 | 6.16 | ? |
onabort | ? | Yes | Yes | 32 | 11 | 6.1 | ? |
onerror | ? | Yes | Yes | 32 | 11 | 6.1 | ? |
onload | ? | Yes | Yes | 32 | 11 | 6.1 | ? |
onloadend | ? | Yes | Yes | 32 | 11 | 6.1 | ? |
onprogress | ? | Yes | Yes | 32 | 11 | 6.1 | ? |
readyState | ? | Yes | Yes | 32 | 11 | 6.1 | ? |
readAsArrayBuffer | ? | Yes | Yes | 32 | 12 | 6.1 | ? |
readAsBinaryString | ? | Yes | Yes | 32 | 11 | 6.1 | ? |
readAsDataURL | ? | Yes | Yes | 32 | 11 | 6.1 | ? |
readAsText | ? | Yes | Yes | 32 | 11 | 6.1 | ? |
result | ? | Yes | Yes | 32 | 11 | 6.1 | ? |
1. Prior to Firefox 4, Blob parameters were File parameters.
2. Prior to Firefox 13, the error property returned a FileError object.
3. From Firefox 13 to Firefox 58, the error property returned a DOMError object.
4. From Firefox 58, the error property returns a DOMException object.
5. From Firefox 32 to Firefox 58, the error property returned a DOMError object.
6. The error property returns a DOMError object.