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
(en-US) or Blob
(en-US) objects to specify the file or data to read.
File objects may be obtained from a FileList
(en-US) object returned as a result of a user selecting files using the <input> (en-US) element, from a drag and drop operation's DataTransfer
object, or from the mozGetAsFile()
API on an HTMLCanvasElement
(en-US).
Constructor
FileReader FileReader();
See Using files from web applications for details and examples.
Properties
FileReader.error
(en-US) Read only- A
DOMError
(en-US) representing the error that occurred while reading the file. FileReader.readyState
(en-US) Read only- A number indicating the state of the
FileReader
. This will be one of the State constants. FileReader.result
(en-US) 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
(en-US)- A handler for the
abort (en-US)
event. This event is triggered each time the reading operation is aborted. FileReader.onerror
(en-US)- A handler for the
error (en-US)
event. This event is triggered each time the reading operation encounter an error. FileReader.onload
(en-US)- A handler for the
load (en-US)
event. This event is triggered each time the reading operation is successfully completed. FileReader.onloadstart
- A handler for the
loadstart (en-US)
event. This event is triggered each time the reading is starting. FileReader.onloadend
- A handler for the
loadend (en-US)
event. This event is triggered each time the reading operation is completed (either in success or failure). FileReader.onprogress
- A handler for the
progress (en-US)
event. This event is triggered while reading aBlob
(en-US) 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()
(en-US)- Aborts the read operation. Upon return, the
readyState
will beDONE
. FileReader.readAsArrayBuffer()
(en-US)- Starts reading the contents of the specified
Blob
(en-US), once finished, theresult
attribute contains anArrayBuffer
(en-US) representing the file's data. FileReader.readAsBinaryString()
(en-US)- Starts reading the contents of the specified
Blob
(en-US), once finished, theresult
attribute contains the raw binary data from the file as a string. FileReader.readAsDataURL()
(en-US)- Starts reading the contents of the specified
Blob
(en-US), once finished, theresult
attribute contains adata:
URL representing the file's data. FileReader.readAsText()
(en-US)- Starts reading the contents of the specified
Blob
(en-US), once finished, theresult
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
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
(en-US) parameters below were File
(en-US) 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
(en-US) object. This interface has been removed and FileReader.error
is now returning the DOMError
(en-US) object as defined in the latest FileAPI draft.
[2] IE9 has a File API Lab.
[3] Opera has partial support in 11.1.
See also
- Using files from web applications
File
(en-US)Blob
(en-US)- nsIDOMFileReader - For addons/privileged scope