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.

Constructor

FileReader FileReader();

See Using files from web applications for details and examples.

Properties

FileReader.error Read only: A DOMError representing the error that occurred while reading the file.
FileReader.readyState Read only: A number indicating the state of the FileReader. This will be one of the State constants.
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.

State constants

EMPTY : 0 : No data has been loaded yet.
LOADING : 1 : Data is currently being loaded.
DONE : 2 : The entire read request has been completed.

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	3.6 (1.9.2)^[1]	7	10^[2]	12.02^[3]	6.0.2

Feature	Firefox Mobile (Gecko)	Android	IE Mobile	Opera Mobile	Safari Mobile
Basic support	32	3	10	11.5	6.1

[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all Blob parameters below were File parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) the FileReader.error property returned a FileError object. This interface has been removed and FileReader.error is now returning the DOMError object as defined in the latest FileAPI draft.

[2] IE9 has a File API Lab.

[3] Opera has partial support in 11.1.