FileReader - Web APIs | MDN Skip to main content Skip to search Technologies Technologies Overview HTML CSS JavaScript Graphics HTTP APIs Browser Extensions MathML References & Guides Learn web development Tutorials References Developer Guides Accessibility Game development ...more docs Feedback Send Feedback Contribute to MDN Report a content issue 🌐 Report a platform issue 🌐 Search MDN FileReader Web technology for developers Web APIs FileReader Select your preferred language English (US) Deutsch Español Français 日本語 한국어 Português (do Brasil) Português (Europeu) Русский Svenska Türkçe 中文 (简体) 正體中文 (繁體) Change language Jump to section Jump to section Constructor Properties Methods Events Specifications Browser compatibility See also 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 element, from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement. Important note: FileReader is used to read file content from the user's (remote) system in secure ways only. It cannot be used to read a file by pathname from a file system. To read files by pathname in JavaScript, standard Ajax solutions should be used to do server-side file reading, 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: 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. 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 Status Comment File API The definition of 'FileReader' in that specification. Working Draft Initial definition Browser compatibility BCD tables only load in the browser See also Using files from web applications File Blob FileReaderSync Related Topics FileReader Constructor FileReader() Properties error onabort onload readyState result Methods abort() readAsArrayBuffer() readAsBinaryString() readAsDataURL() readAsText() Events abort error load loadend loadstart progress Inheritance: EventTarget Related pages for File API Blob File FileList FileReaderSync Found a problem with this page? Source on GitHub Report a problem with this content on GitHub Want to fix the problem yourself? See our Contribution guide. Last modified: Dec 20, 2020, by MDN contributors Web Technologies Learn Web Development About MDN Feedback About MDN Web Docs Store Contact Us Firefox MDN Mozilla © 2005-2021 Mozilla and individual contributors. Content is available under these licenses. Terms Privacy Cookies