Cordova Example: Writing to a File

as you know, lately i've been publishing simple cordova examples that involve the file system. i'm working on a demo that involves background asset downloads (see the blog entry ) but i thought i'd take a break from that and write up something super simple, but hopefully helpful, that demonstrates file writing.

with that in mind i built a demo that writes to a log file. the idea being that your app may want to record what it is doing. normally you would do that via xhr to a server, but logging to a file ensures it will work offline as well. and perhaps you don't really need the data on your server but just want a log you can check later if things go wrong. let's take a look at the code bit by bit.

the first thing i need to do is get a handle to the file. i'm going to use a file inside cordova.file.datadirectory, which is an alias to an application-specific folder with read/write access.

window.resolvelocalfilesystemurl(cordova.file.datadirectory, function(dir) {
console.log("got main dir",dir);
dir.getfile("log.txt", {create:true}, function(file) {
console.log("got the file", file);
logob = file;
writelog("app started");
});
});

resolvelocalfilesystemurl converts the alias path into a directory entry object. that has a variety of methods but the one we care about is getfile . note the create:true flag. this ensures that the file will be created the first time it is run. i also copy the file object into a variable logob that is global to my application. finally i call writelog . that's my utility function. let's look at that next.

function writelog(str) {
if(!logob) return;
var log = str + " [" + (new date()) + "]\n";
console.log("going to log "+log);
logob.createwriter(function(filewriter) {

filewriter.seek(filewriter.length);

var blob = new blob([log], {type:'text/plain'});
filewriter.write(blob);
console.log("ok, in theory i worked");
}, fail);
}

so first off, if logob wasn't created, we simply return. my thinking here is that log file writing is not required for the application. i want to silently ignore if we couldn't write to the file system for whatever reason. i modify the input a bit (adding a timestamp and a newline) and then begin the write operation. this particular code was taken right from the html5rocks article on the filesystem api. it uses seek to append as opposed to overwrite the file.

with this in place i could then add calls to the log utility from my application. since my "application" is just a demo, i added two buttons that do nothing but log.

document.queryselector("#actionone").addeventlistener("touchend", function(e) {
//ok, normal stuff for actionone here
//
//now log it
writelog("actionone fired");
}, false);

document.queryselector("#actiontwo").addeventlistener("touchend", function(e) {
//ok, normal stuff for actiontwo here
//
//now log it
writelog("actiontwo fired");
}, false);

the final thing i did was add a special function that would read the file out and send it to console. i did this just for testing.

function justfortesting() {
logob.file(function(file) {
var reader = new filereader();

reader.onloadend = function(e) {
console.log(this.result);
};

reader.readastext(file);
}, fail);

}

to see this in action, i used gapdebug and my ios simulator. that let me run justfortesting right from my browser. in the screen shot below, note that the beginning of the file isn't formatted right. that's because i forgot the newline initially.

i hope this helps. you can find the complete source in my github repo with the rest of my demos: https://github.com/cfjedimaster/cordova-examples/tree/master/writelog.