FileReader

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

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.

Important note: FileReader is used to read file content from the user's (remote) system in secure ways only. It cannot be used to simply read a file by pathname from a file system. To read files by pathname in JavaScript, standard Ajax solutions should be used to do server-side file reading, with CORS permission if reading cross-domain.

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.

Events

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

abort
Fired when a read has been aborted, for example because the program called FileReader.abort().
Also available via the onabort property.
error
Fired when the read failed due to an error.
Also available via the onerror property.
load
Fired when a read has completed successfully.
Also available via the onload property.
loadend
Fired when a read has completed, successfully or not.
Also available via the onloadend property.
loadstart
Fired when a read has started.
Also available via the onloadstart property.
progress
Fired periodically as data is read.
Also available via the onprogress property.

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
FileReaderChrome Full support 7Edge Full support YesFirefox Full support 3.6
Notes
Full support 3.6
Notes
Notes Prior to Firefox 4, Blob parameters were File parameters.
IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
abortChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
abort eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
errorChrome Full support 7Edge Full support 12Firefox Full support 3.6
Notes
Full support 3.6
Notes
Notes Prior to Firefox 13, the error property returned a FileError object.
Notes From Firefox 13 to Firefox 58, the error property returned a DOMError object.
Notes From Firefox 58, the error property returns a DOMException object.
IE Full support 10
Notes
Full support 10
Notes
Notes The error property returns a DOMError object.
Opera Full support 11Safari Full support 6
Notes
Full support 6
Notes
Notes The error property returns a DOMError object.
WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32
Notes
Full support 32
Notes
Notes From Firefox 32 to Firefox 58, the error property returned a DOMError object.
Notes From Firefox 58, the error property returns a DOMException object.
Opera Android Full support 11Safari iOS Full support 6.1
Notes
Full support 6.1
Notes
Notes The error property returns a DOMError object.
Samsung Internet Android ?
error eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
load eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
loadend eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
loadstart eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
onabortChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
onerrorChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
onloadChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
onloadendChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
onprogressChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
progress eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
readAsArrayBufferChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 12Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 12Safari iOS Full support 6.1Samsung Internet Android ?
readAsBinaryStringChrome Full support 7Edge Full support 12Firefox Full support 3.6IE No support NoOpera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
readAsDataURLChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32
Notes
Full support 32
Notes
Notes Using the camera in Android 8.x raises an exception. See bug 1511083.
Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
readAsTextChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
readyStateChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
resultChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
Available in workersChrome Full support YesEdge Full support YesFirefox Full support 46IE No support NoOpera Full support 11Safari No support NoWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 46Opera Android Full support 11Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also

Blob