FileReader

FileReader is an object that allows one to read a file.

Properties

  • readyState: One of the three states the reader can be in EMPTY, LOADING or DONE.
  • result: The contents of the file that has been read. (DOMString)
  • error: An object containing errors. (FileError)
  • onloadstart: Called when the read starts. . (Function)
  • onprogress: Called while reading the file, reports progress (progess.loaded/progress.total). (Function) -NOT SUPPORTED
  • 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)

Methods

  • abort: Aborts reading file.
  • readAsDataURL: Read file and return data as a base64 encoded data url.
  • readAsText: Reads text file.

Details

The FileReader object is a way to read files from the devices file system. Files can be read as text or as a base64 data encoded string. Users register their own event listners to receive the loadstart, progress, load, loadend, error and abort events.

Supported Platforms

  • Android
  • BlackBerry WebWorks (OS 5.0 and higher)
  • iOS

Read As Data URL

Parameters:

  • fileName - the full path of the file to read

Quick Example

var win = function(evt) {
	console.log(evt.target.result);
};
var fail = function(evt) {
	console.log(evt.target.error.code);
};

var paths = navigator.fileMgr.getRootPaths();
var reader = new FileReader();
reader.onload = win;
reader.onerror= fail;
reader.readAsDataURL(paths[0] + "readme.txt");

Read As Text

Parameters:

  • fileName - the full path of the file to read
  • encoding - the encoding to use to encode the file's content. Default is UTF8.

Quick Example

var win = function(evt) {
	console.log(evt.target.result);
};
var fail = function(evt) {
	console.log(evt.target.error.code);
};

var paths = navigator.fileMgr.getRootPaths();
var reader = new FileReader();
reader.onload = win;
reader.onerror= fail;
reader.readAsText(paths[0] + "readme.txt");

Abort Quick Example

var aborted = function(evt) {
	console.log(evt.target.error.code);
};

var paths = navigator.fileMgr.getRootPaths();
var reader = new FileReader();
reader.onabort = aborted;
reader.readAsText(paths[0] + "readme.txt");
reader.abort();

Full Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Contact Example</title>

    <script type="text/javascript" charset="utf-8" src="phonegap.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() {
		var paths = navigator.fileMgr.getRootPaths();
		var reader = new FileReader();
		reader.onload = win;
		reader.onerror= fail;
		reader.readAsText(paths[0] + "readme.txt");
    }

	function win(evt) {
		console.log(evt.target.result);
	}
	
	function fail(evt) {
		console.log(evt.target.error.code);
	}
	
    </script>
  </head>
  <body onload="onLoad()">
    <h1>Example</h1>
    <p>Read File</p>
  </body>
</html>

iOS Quirks

  • encoding parameter is not supported, UTF8 encoding is always used.
  • readAsDataUrl() is not supported.