Read a File in PhoneGap

In the last article we have discussed the Flags and the LocalFileSystem in PhoneGap. To read a file, we require a FileReader object. TheFileReader object is a way to read a file from the device's FileSystem. A file can be read as text, or as a Base64-encoded data string.

This object has the following properties.

  • readyState : This is one of the three states (EMPTY, LOADING OR DONE), the reader can be in.
  • result : This is used to get the content of the file that has been read.
  • error : This is used for an object containing errors.
  • onloadstart : This is called when we start reading.
  • onload : This is called when the reading has successfully completed.
  • onabort : This is called when the read has been aborted.
  • onerror : This is called when the read has got failed.
  • onloaded : This is called when the request has completed (either in success or failure).

This object has the following methods:

  • abort.
  • readAsDataUrl.
  • readAsText.

abort

By using the abort() method, we can stop reading a file from the FileSystem as shown in the following code:

function success(file) {
var reader_file = new FileReader();
reader_file.onloadend = function (event) {
alert("read success");
alert(event.target.result);
};
reader_file.readAsText(file);
reader_file.abort();
}
function fail(error) {
console.log(error.code);
}
entry.file(success, fail);

readAsDataUrl.

Using the readAsDataUrl() method, we can read a file and return the data as Base64-encoded data, which is ideal for images and other binary files as shown in the following code:

function success(file) {
var file_reader  = new FileReader();
file_reader .onloadend = function(evt) {
alert("read success");
alert(evt.target.result);
};
file_reader .readAsDataURL(file);
}
function fail(evt) {
console.log(error.code);
}
entry.file(success, fail);

ReadAsText

By using the ReadAsText() method, we can also read a file and return text, which is most suitable for TXT file as shown in the following code:

function success(file) {
var file_reader  = new FileReader();
file_reader .onloadend = function(evt) {
alert("read success");
alert(evt.target.result);
};
file_reader .readAsDataURL(file);
}
function fail(evt) {
console.log(error.code);
}
entry.file(success, fail);

FULL EXAMPLE

<!DOCTYPE html>
<html>
  <head>
    <title>FileReader Example</title>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
    <script type="text/javascript" charset="utf-8">

        // Wait for PhoneGap to load
        //
        function onLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }

 // PhoneGap is ready
    //
    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 readAsDataURL(file) {
        var file_reader = new FileReader();
        file_reader.onloadend = function (evt) {
            console.log("Read as data URL");
            console.log(evt.target.result);
        };
        file_reader.readAsDataURL(file);
    }
    function readAsText(file) {
        var file_reader = new FileReader();
        file_reader.onloadend = function (evt) {
            console.log("Read as text");

            console.log(evt.target.result);
        };
        file_reader.readAsText(file);
    }
    function fail(evt) {
        console.log(evt.target.error.code);
    }
      </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Read File</p>
  </body>
</
html>

Supported Platform:

  • Android
  • Blackberry WebWorks (OS 5.0 and higher)
  • iOS
  • Windows Phone 7 (Mango)

Resources:

some of the useful resources are:

Using Flags and LocalFileSystem in PhoneGap
Working With Networks in Windows Phone 7 Using PhoneGap
Media in PhoneGap
Events in PhoneGap

Up Next
    Ebook Download
    View all
    Learn
    View all