FileReader

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.

FileReader can only access the contents of files that the user has explicitly selected, either using an HTML <input type="file"> element or by drag and drop. It cannot be used to read a file by pathname from the user's file system. To read files on the client's file system by pathname, use the File System Access API. To read server-side files, use standard Ajax solutions, 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:

Name Value Description
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.

Note: 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. An optional encoding name can be specified.

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
File API
# APIASynch

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
FileReader
7
12
3.6
Before Firefox 4, Blob parameters were File parameters.
10
11
6
≤37
18
32
11
6
1.0
FileReader
7
12
3.6
10
≤12.1
6
≤37
18
32
≤12.1
6
1.0
abort
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
abort_event
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
error
7
12
3.6
["Before Firefox 13, the error property returned a FileError object.", "From Firefox 13 to Firefox 58, the error property returned a DOMError object.", "From Firefox 58, the error property returns a DOMException object."]
10
The error property returns a DOMError object.
11
6
The error property returns a DOMError object.
≤37
18
32
["From Firefox 32 to Firefox 58, the error property returned a DOMError object.", "From Firefox 58, the error property returns a DOMException object."]
11
6
The error property returns a DOMError object.
Yes
error_event
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
load_event
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
loadend_event
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
loadstart_event
7
12
79
3.6-79
loadstart event dispatches synchronously (should be asynchronously as per spec).
10
11
6
≤37
18
79
32-79
loadstart event dispatches synchronously (should be asynchronously as per spec).
11
6
1.0
onabort
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
onerror
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
onload
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
onloadend
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
onloadstart
7
12
3.6
10
15
6
≤37
18
32
14
6
1.0
onprogress
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
progress_event
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
readAsArrayBuffer
7
12
3.6
10
12
6
≤37
18
32
12
6
1.0
readAsBinaryString
7
12
3.6
No
11
6
≤37
18
32
11
6
1.0
readAsDataURL
7
12
3.6
10
11
6
≤37
18
32
Using the camera in Android 8.x raises an exception. See bug 1511083.
11
6
1.0
readAsText
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
readyState
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
result
7
12
3.6
10
11
6
≤37
18
32
11
6
1.0
worker_support
7
12
46
11
11
6
≤37
18
46
11
6
1.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/FileReader