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()- Returns a newly constructed
FileReader.
See Using files from web applications for details and examples.
Properties
FileReader.errorRead only- A
DOMErrorrepresenting the error that occurred while reading the file. FileReader.readyStateRead only- A number indicating the state of the
FileReader. This is one of the following:EMPTY0No data has been loaded yet. LOADING1Data is currently being loaded. DONE2The entire read request has been completed. FileReader.resultRead 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
abortevent. This event is triggered each time the reading operation is aborted. FileReader.onerror- A handler for the
errorevent. This event is triggered each time the reading operation encounter an error. FileReader.onload- A handler for the
loadevent. This event is triggered each time the reading operation is successfully completed. FileReader.onloadstart- A handler for the
loadstartevent. This event is triggered each time the reading is starting. FileReader.onloadend- A handler for the
loadendevent. This event is triggered each time the reading operation is completed (either in success or failure). FileReader.onprogress- A handler for the
progressevent. This event is triggered while reading aBlobcontent.
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
readyStatewill beDONE. FileReader.readAsArrayBuffer()- Starts reading the contents of the specified
Blob, once finished, theresultattribute contains anArrayBufferrepresenting the file's data. FileReader.readAsBinaryString()- Starts reading the contents of the specified
Blob, once finished, theresultattribute contains the raw binary data from the file as a string. FileReader.readAsDataURL()- Starts reading the contents of the specified
Blob, once finished, theresultattribute contains adata:URL representing the file's data. FileReader.readAsText()- Starts reading the contents of the specified
Blob, once finished, theresultattribute 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 |
| Support in Web Workers | 46 (46) | (Yes) | No support | (Yes) | No support |
| Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 32 | 3 | 10 | 11.5 | 6.1 |
| Support in Web Workers | 46 (46) | (Yes) | No support | (Yes) | No support |
[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.