HTML5 File API

HTML5 File API aspect provides an API for representing file objects in web applications and programmatic selection and accessing their data.In addition, this specification defines objects to be used within threaded web applications for the synchronous reading of files. The File API describes how interactions with files are handled,for reading information about them and their data as well,to be able to upload it.

Introduction

The File API is a powerful API that allows developers to handle files from a users file system and manipulate those files to be used within a web application all done locally without server processing. There are two ways to detect the files a user is trying to upload:

• Through an <input type="file"> element and its on-change event.
• By drag and drop you can use the on-drop event to detect which files were dropped.

File Reader Interface

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 in one of two ways: from a FileList object returned as a result of a user selecting files using the <input> element, or from a drag and drop operation's DataTransfer object.

A FileReader can be created by the following way:

        reader=new FileReader();

Methods

The FileReader interface consists of the following methods:

1. abort();
2. readAsBinaryString();
3. readAsDataURL();
4. readAsText();

abort()

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

    void abort();

readAsBinaryString()

Starts reading the contents of the specified Blob, which may be a File. When the read operation is finished, the readyState will become DONE, and the onloaded callback, if any, will be called. At that time, the result attribute contains the raw binary data from the file.

    void readAsBinaryString(in Blob blob);

readAsDataURL()

Starts reading the contents of the specified Blob or File. When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains a data: URL representing the file's data.

    void readAsDataURL(in Blob blob);

readAsText()

Starts reading the specified blob's contents. When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains the contents of the file as a text string.

    void readAsText(in Blob blob,[optional]in DOMString encoding);

File Interface

The File object provides information about files and access to the contents of files. These are generally retrieved from a FileList object returned as a result of a user selecting files using the input element, or from a drag and drop operation's DataTransfer object.

Methods

The File interface consists of the following methods:

1. getAsBinary();
2. getAsDataURL():
3. getAsText():

getAsBinary()

Returns a string containing the file's data in raw binary format.

    String getAsBinary();

getAsDataURL

Returns a string containing a data: URL that encodes the entire contents of the referenced file.

    String getAsDataURL();

getAsText

Returns the file's contents as a string in which the file's data is interpreted as text using a given encoding.

    String getAsText(String encoding);

See Also

• HTML5
• Geolocation API
• Binary Large Object

References

1. HTML5 File Writer API
2. HTML5 File API
3. Reading local files in JavaScript
4. A state of limbo: the html5 file api, filereader, and blobs
5. Geolocation API

External Links

• W3C HTML5
• W3C File API Editor's Draft