Twitter: raymondcamden


Address: Lafayette, LA, USA

Cordova Sample: Reading a text file

07-15-2014 2,971 views Mobile, JavaScript, HTML5 6 Comments

A few weeks back I began a list of questions to help build a PhoneGap/Cordova File System FAQ. (More on that at the very end.) As I work through the questions I'm building little samples (like this one) to help demonstrate various FileSystem features. Today's is really simple, but as always, I figure people can find this helpful even if it trivial. (And if I'm wrong, let me know in the comments below.) Today's example simply reads a text-based file from the file system and displays it in the application.

Let's take a look at the code and then I'll walk you through what it does.

document.addEventListener("deviceready", init, false);
function init() {
	
	//This alias is a read-only pointer to the app itself
	window.resolveLocalFileSystemURL(cordova.file.applicationDirectory + "www/index.html", gotFile, fail);

	/* Yes, this works too for our specific example...
	$.get("index.html", function(res) {
		console.log("index.html", res);
	});
	*/

}

function fail(e) {
	console.log("FileSystem Error");
	console.dir(e);
}

function gotFile(fileEntry) {

	fileEntry.file(function(file) {
		var reader = new FileReader();

		reader.onloadend = function(e) {
			console.log("Text is: "+this.result);
			document.querySelector("#textArea").innerHTML = this.result;
		}

		reader.readAsText(file);
	});

}

After deviceready fires, we use resolveLocalFileSystemURL to translate a path into a FileEntry object. Once again I'm using one of the aliases that ship with the latest version of the File plugin: cordova.file.applicationDirectory. As you can probably guess, this points to the application itself and is read-only, which is fine for our purposes. To this path I add www/index.html to refer to the index.html of the app itself.

As you can see in the commented out code, if I really did want to read something inside the www folder, I could just use Ajax. The example in the comment is jQuery-based. But since I wanted to demonstrate the FileSystem API I use it instead. For something this simple I'd probably just use Ajax typically.

Once we get the FileEntry object we can then run the file method on it. This gives us a handler to the file itself (think of FileEntry as the agent for the movie star file that is too busy to give us the time of day). Once we have that, we then fire up a new FileReader object, run readAsText on it, and wait for the read operation to end. Once it is done we have access to the contents of the file and can do - whatever - with it. In the sample app I simply added a text area to the DOM.

That's it. Full source may be found here: https://github.com/cfjedimaster/Cordova-Examples/tree/master/readtextfile.

As a quick FYI, I have begun work on the FAQ itself. You can view (and comment) on the Google doc here: https://docs.google.com/document/d/1qKB63z3U2BwCl7Gc-Ry7cPbNbQB-Cur2BaS1BRB1tV0/edit?usp=sharing

6 Comments

  • Martin Cisneros Capistrán #
    Commented on 07-15-2014 at 5:00 PM
    Hi Raymond i have a question i don't know if this is the best place to do it but... wel... can you tell me why the examples of phonegap/cordova plugins at github are shorter than the examples of phonegap 3.3.0 ? An example:

    The Camera Plugin at github (phonegap greater than 3.3.0 version):
    https://github.com/apache/cordova-plugin-camera/bl...

    The Camera Plugin Examples (phonegap 3.3.0):
    http://docs.phonegap.com/en/3.3.0/cordovacameracamera.md.html#Camera

    Just why? :/
  • Martin Cisneros Capistrán #
    Commented on 07-15-2014 at 5:01 PM
    Sorry the second link is

    http://docs.phonegap.com/en/3.3.0/cordovacameracamera.md.html#Camera
  • Martin Cisneros Capistrán #
    Commented on 07-15-2014 at 5:03 PM
    I can't post the original link hehe:

    http://docs.phonegap.com/en/3.3.0/cordova(underscore)camera(underscore)camera.md.html#Camera
  • anchal arora #
    Commented on 07-16-2014 at 4:48 AM
    I am getting an error
    uncaught TypeError :
    cannot read property 'application directory' of undefined
    can u please help me..
  • Commented on 07-16-2014 at 10:07 AM
    @Martin: Um, I think because PG is still using internal docs, where on Cordova they always link to the plugin docs itself, which is, imo, more "proper".

    @anchal: Ensure you added the plugin as described in the readme.md.
  • Martin Cisneros Capistrán #
    Commented on 07-16-2014 at 12:37 PM
    Oh i see, thank you!

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty