(/en-US/docs/Web/API/File)
    3. [ ` FileList ` ](/en-US/docs/Web/API/FileList)
    4. [ ` FileReaderSync ` ](/en-US/docs/Web/API/FileReaderSync)

##  In this article

  * Constructor 
  * Instance properties 
  * Instance methods 
  * Events 
  * Specifications 
  * Browser compatibility 
  * See also 

#  FileReader

**Note:** This feature is available in [ Web Workers ](/en-
US/docs/Web/API/Web_Workers_API) .

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/docs/Web/API/File) or [ ` Blob ` ](/en-US/docs/Web/API/Blob)
objects to specify the file or data to read.

File objects may be obtained from a [ ` FileList ` ](/en-
US/docs/Web/API/FileList) object returned as a result of a user selecting
files using the [ ` <input> ` ](/en-US/docs/Web/HTML/Element/input) element,
or from a drag and drop operation's [ ` DataTransfer ` ](/en-
US/docs/Web/API/DataTransfer) object.

` 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 ](/en-US/docs/Web/API/File_System_API) . To read
server-side files, use [ ` fetch() ` ](/en-US/docs/Web/API/fetch) , with [
CORS ](/en-US/docs/Web/HTTP/CORS) permission if reading cross-domain.

EventTarget  FileReader

##  Constructor

[ ` FileReader() ` ](/en-US/docs/Web/API/FileReader/FileReader
"FileReader\(\)")

    

Returns a new ` FileReader ` object.

See [ Using files from web applications ](/en-
US/docs/Web/API/File_API/Using_files_from_web_applications) for details and
examples.

##  Instance properties

[ ` FileReader.error ` ](/en-US/docs/Web/API/FileReader/error) Read only

    

A [ ` DOMException ` ](/en-US/docs/Web/API/DOMException) representing the
error that occurred while reading the file.

[ ` FileReader.readyState ` ](/en-US/docs/Web/API/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 ` ](/en-US/docs/Web/API/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.

##  Instance methods

[ ` FileReader.abort() ` ](/en-US/docs/Web/API/FileReader/abort)

    

Aborts the read operation. Upon return, the ` readyState ` will be ` DONE ` .

[ ` FileReader.readAsArrayBuffer() ` ](/en-
US/docs/Web/API/FileReader/readAsArrayBuffer)

    

Starts reading the contents of the specified [ ` Blob ` ](/en-
US/docs/Web/API/Blob) , once finished, the ` result ` attribute contains an [
` ArrayBuffer ` ](/en-
US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) representing the
file's data.

[ ` FileReader.readAsBinaryString() ` ](/en-
US/docs/Web/API/FileReader/readAsBinaryString) Deprecated

    

Starts reading the contents of the specified [ ` Blob ` ](/en-
US/docs/Web/API/Blob) , once finished, the ` result ` attribute contains the
raw binary data from the file as a string.

[ ` FileReader.readAsDataURL() ` ](/en-
US/docs/Web/API/FileReader/readAsDataURL)

    

Starts reading the contents of the specified [ ` Blob ` ](/en-
US/docs/Web/API/Blob) , once finished, the ` result ` attribute contains a `
data: ` URL representing the file's data.

[ ` FileReader.readAsText() ` ](/en-US/docs/Web/API/FileReader/readAsText)

    

Starts reading the contents of the specified [ ` Blob ` ](/en-
US/docs/Web/API/Blob) , once fi