FileReader

The FileReader allows basic access to a file.

Properties

  • readyState: One of the reader's three possible states, either EMPTY, LOADING or DONE.

  • result: The contents of the file that have been read. (DOMString)

  • error: An object containing errors. (FileError)

  • onloadstart: Called when the read starts. (Function)

  • onload: Called when the read has successfully completed. (Function)

  • onabort: Called when the read has been aborted. For instance, by invoking the abort() method. (Function)

  • onerror: Called when the read has failed. (Function)

  • onloadend: Called when the request has completed (either in success or failure). (Function)

NOTE: The following porperty is not supported:

  • onprogress: Called while reading the file, reporting progress in terms of progress.loaded/progress.total. (Function)

Methods

  • abort: Aborts reading file.

  • readAsDataURL: Read file and return data as a base64-encoded data URL.

  • readAsText: Reads text file.

  • readAsBinaryString: Reads file as binary and returns a binary string.

  • readAsArrayBuffer: Reads file as an ArrayBuffer.

Details

The FileReader object offers a way to read files from the device's file system. Files can be read as text or as a base64 data-encoded string. Event listeners receive the loadstart, progress, load, loadend, error, and abort events.

Supported Platforms

  • Android
  • BlackBerry WebWorks (OS 5.0 and higher)
  • iOS
  • Windows Phone 7 and 8
  • Windows 8

readAsDataURL

Parameters:

  • file: the file object to read.

Quick Example

function win(file) {
    var reader = new FileReader();
    reader.onloadend = function (evt) {
        console.log("read success");
        console.log(evt.target.result);
    };
    reader.readAsDataURL(file);
};

var fail = function (error) {
    console.log(error.code);
};

entry.file(win, fail);

readAsText

Parameters:

  • file: the file object to read.

  • encoding: the encoding to use to encode the file's content. Default is UTF8.

Quick Example

function win(file) {
    var reader = new FileReader();
    reader.onloadend = function (evt) {
        console.log("read success");
        console.log(evt.target.result);
    };
    reader.readAsText(file);
};

var fail = function (error) {
    console.log(error.code);
};

entry.file(win, fail);

abort

function win(file) {
    var reader = new FileReader();
    reader.onloadend = function(evt) {
        console.log("read success");
        console.log(evt.target.result);
    };
    reader.readAsText(file);
    reader.abort();
};

function fail(error) {
    console.log(error.code);
}

entry.file(win, fail);

Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>FileReader Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.file(gotFile, fail);
    }

    function gotFile(file){
        readDataUrl(file);
        readAsText(file);
    }

    function readDataUrl(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as data URL");
            console.log(evt.target.result);
        };
        reader.readAsDataURL(file);
    }

    function readAsText(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as text");
            console.log(evt.target.result);
        };
        reader.readAsText(file);
    }

    function fail(error) {
        console.log(error.code);
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Read File</p>
  </body>
</html>

iOS Quirks

  • The encoding parameter is not supported, and UTF8 encoding is always in effect.

readAsBinaryString

Currently supported on iOS and Android only.

Parameters:

  • file: the file object to read.

Quick Example

function win(file) {
    var reader = new FileReader();
    reader.onloadend = function (evt) {
        console.log("read success");
        console.log(evt.target.result);
    };
    reader.readAsBinaryString(file);
};

var fail = function (error) {
    console.log(error.code);
};

entry.file(win, fail);

readAsArrayBuffer

Currently supported on iOS and Android only.

Parameters:

  • file: the file object to read.

Quick Example

function win(file) {
    var reader = new FileReader();
    reader.onloadend = function (evt) {
        console.log("read success");
        console.log(new Uint8Array(evt.target.result));
    };
    reader.readAsArrayBuffer(file);
};

var fail = function (error) {
    console.log(error.code);
};

entry.file(win, fail);