HTML and CSS Reference
Table 9-5. Properties of the FileReader Object
Error that occurred (if any) while reading a file.
State of a FileReader object. The possible readyState values are 0 ( EMPTY ), 1
( LOADING ), and 2 ( DONE ).
File's contents. This property is valid only after the read operation is complete.
The format of the data returned depends on the read method invoked.
The FileReader raises certain events as the file is being read. You can wire up handlers for these events
and intercept various stages of the read operation. The events raised by the FileReader object are given in
Table 9-6. Events of the FileReader Object
Raised when a file is successfully read
Raised when the reading of file content is about to begin
Raised when the file-reading operation completes successfully or with an
Raised periodically when data is being read
Raised when there is some error while performing the read operation
Raised when a read operation is aborted
Out of all the events listed in Table 9-6, you must handle the load event because that is where you can
access the file content.
Selecting Files to Be Used With the File API
As mentioned previously, files to be accessed using the File API must be explicitly selected by the user in
one of the following ways:
• A user can select iles using the Open File dialog shown by a ile ield control.
• As user can drag iles from Windows Explorer and drop those iles on some
predefined area of a web page.
The first way is straightforward and traditional. A variation on this technique is to display the Open
File dialog without a visible file field on the page. In such cases, you need to play tricks to achieve the
desired behavior. The second way is specific to HTML5, and with the native support for drag-and-drop it's
easy to implement in web pages.
The following sections discuss these two ways of selecting files. Note that HTML5 drag-and-drop
features aren't restricted to file selection alone and can be used independently in your applications.
Using a File Field to Select Files
Using a file field to select one or more files is the most basic technique of selecting files to be used with the
File API. Prior to HTML5, a file field control allowed the selection of only one file at a time. If you wanted to