PhoneGap/Cordova Example - Getting File Metadata (and an update to the FAQ)

I decided to move my PhoneGap/Cordova FileSystem FAQ from a Google Doc to my Cordova Examples repository. I figured this would make it a bit easier for folks to edit and simpler for me to commit those changes. You can find the FAQ here:

PhoneGap Cordova File System FAQ

In doing so I decided to quickly knock out one of the questions - how to get metadata about files. This is rather trivial, so my demo app is rather trivial, but hopefully it will help folks. The basic gist is - once you have a FileEntry object, you can then fetch the File object itself (MDN Docs) and fetch various properties. Here is a super simple demo roughly based on the ones I showed earlier. It uses window.resolveLocalFileSystemURL to get index.html.

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

}

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

function gotFile(fileEntry) {

	fileEntry.file(function(file) {
		var s = "";
		s += "<b>name:</b> " + file.name + "<br/>";
		s += "<b>localURL:</b> " + file.localURL + "<br/>";
		s += "<b>type:</b> " + file.type + "<br/>";
		s += "<b>lastModifiedDate:</b> " + (new Date(file.lastModifiedDate)) + "<br/>";
		s += "<b>size:</b> " + file.size + "<br/>";
		
		document.querySelector("#status").innerHTML = s;
		console.dir(file);
	});
}

Here is a sample of it running in iOS. (Be aware - there is a bug with Android that may prevent this from working. It is reported at the Cordova site.)

So - yeah - not rocket science - but hopefully helpful. This "application" can be grabbed from my Cordova repo: https://github.com/cfjedimaster/Cordova-Examples/tree/master/getfiledata.

Archived Comments

Comment 1 by Giacomo Balli posted on 8/22/2014 at 8:20 PM

why is type showing up as _null_?
also, is this any better/easier then using AJAX and getting headers?

Comment 2 by Raymond Camden posted on 8/22/2014 at 8:24 PM

If I had to guess, it doesn't know what an html file is.

Is this better? Um... I don't know. :) I've been using files under www/ for my blog posts because it is easier to work with. I think generally folks will probably *not* be doing that. Does that make sense?

Comment 3 by Giacomo Balli posted on 8/22/2014 at 8:48 PM

Might make sense but not really getting it :)
Either way, I believe it's subjective (i.e. what you're used to)...

Comment 4 by Realtebo posted on 12/7/2015 at 11:27 AM

I've a problem with FileEntry properties. I've a FileEntry; it's ok because I can succesfully do a .remove() on it. But, before remove, obviously, if I print .lastModifiedDate or .size I got undefined as both value. Why?

Comment 5 (In reply to #4) by Raymond Camden posted on 12/7/2015 at 4:19 PM

Can you post a Gist to the code? It may be an async issue.

Comment 6 (In reply to #5) by Realtebo posted on 12/9/2015 at 1:43 PM

It was a my mistake: i forgot to call the .file() function. thanks for your reply and for your excellent tutorials.

Comment 7 by Torsten Feld posted on 1/10/2016 at 9:59 AM

Thank you for this article. You saved my day! :)

Comment 8 by Prashanth Kumar posted on 5/30/2016 at 4:41 AM

Why is type null, i need the mime type, can i not get it in any other way?

Comment 9 (In reply to #8) by Raymond Camden posted on 5/30/2016 at 6:07 PM

Not sure. You may need to file a bug report.