Cordova Sample: Reading a text file

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");

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;



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:

As a quick FYI, I have begun work on the FAQ itself. You can view (and comment) on the Google doc here:

  • sawyer

    Hi Raymond , i got a question when i run ur demo,the eclipse reports FileNotFoundException ,i don know why ,is there any problem in my config.xml?

    • http://www.raymondcamdencom/ Raymond Camden

      Unfortunately this code is broken on Android due to this bug:

      For now, if your code is really under www as it is in my demo, use XHR.

      • sawyer

        this approach works out .Thks a lot ! but what if i want to write something into the txt, what sould i do ?

        • http://www.raymondcamdencom/ Raymond Camden

          Search the blog – I also have demos for writing. :) Or you can go to my GitHub repo where I store all of them:

          (To be clear, that repo doesn’t have *all* my demos – I started using it about a year ago to have a central place, but I’ve been blogging about PhoneGap/Cordova longer than that.)

  • GillesCa

    you need to add the file plugin.

    Go to your applications directory via CMD (windows). And typ the following command: cordova plugin add cordova-plugin-file

    With the assumption you installed the cordova CLI.
    More info Cordova CLI:
    More info file plugin: