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.

Note: This feature is available in Web Workers.

Constructor

FileReader()
Returns a newly constructed FileReader.

See Using files from web applications for details and examples.

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:
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.

Event handlers

FileReader.onabort
A handler for the abort event. This event is triggered each time the reading operation is aborted.
FileReader.onerror
A handler for the error event. This event is triggered each time the reading operation encounter an error.
FileReader.onload
A handler for the load event. This event is triggered each time the reading operation is successfully completed.
FileReader.onloadstart
A handler for the loadstart event. This event is triggered each time the reading is starting.
FileReader.onloadend
A handler for the loadend event. This event is triggered each time the reading operation is completed (either in success or failure).
FileReader.onprogress
A handler for the progress event. This event is triggered while reading a Blob content.

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 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()
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.

Specifications

Specification Status Comment
File API
The definition of 'FileReader' in that specification.
Working Draft Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support7 Yes3.6110116
Available in workers Yes Yes46 No11 No
abort7 Yes3.610116
error7 Yes3.62 3 41061166
onabort7 Yes3.610116
onerror7 Yes3.610116
onload7 Yes3.610116
onloadend7 Yes3.610116
onprogress7 Yes3.610116
readyState7 Yes3.610116
readAsArrayBuffer7 Yes3.610126
readAsBinaryString7 Yes3.610116
readAsDataURL7 Yes3.610116
readAsText7 Yes3.610116
result7 Yes3.610116
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? Yes Yes32116.1 ?
Available in workers Yes Yes Yes4611 No ?
abort ? Yes Yes32116.1 ?
error ? Yes Yes324 5116.16 ?
onabort ? Yes Yes32116.1 ?
onerror ? Yes Yes32116.1 ?
onload ? Yes Yes32116.1 ?
onloadend ? Yes Yes32116.1 ?
onprogress ? Yes Yes32116.1 ?
readyState ? Yes Yes32116.1 ?
readAsArrayBuffer ? Yes Yes32126.1 ?
readAsBinaryString ? Yes Yes32116.1 ?
readAsDataURL ? Yes Yes32116.1 ?
readAsText ? Yes Yes32116.1 ?
result ? Yes Yes32116.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.

See also