Using PhoneGap to Access Native iPad APIs

I’m working on a project that required an iPad “application”, which we ended up writing as an HTML site that is accessed in Safari.  Later, that same app had a requirement to access the camera roll on an iPad.  Thanks to Chris Rudy here at IK for introducing us to PhoneGap – a way to wrap your HTML web page(s) in a framework that is then compiled into a native application for the OS you’re targeting (iPad, Android, WinPhone7, etc).  Chris blogged about it here and here.

Unexpected Error

The PhoneGap framework exposes a handful of APIs to access the native hardware on the device (such as camera, accelerometer, compass, contacts, etc).  This all sounded great.  I sat down to write the code, following the examples in the API docs.  I could access the camera roll no problem – the user is shown the photos, they choose one, and you wake up in an event handler in your code.  Next I would try to post that image to a simple REST API running on my Windows machine. No matter what I did, I would get an “Unexpected Error” from the post.  I tried the PhoneGap FileTransfer API and then some more low level AJAX post methods.  All resulted in errors.

I let the code sit for a week until the next RECESS, when I dug a little deeper.  I finally found that I was running into a KNOWN BUG in the Camera API, and that it was fixed and released THAT DAY.  So now with PhoneGap version 1.6.1, the Camera.getPicture( ) method will properly return the BYTES of the image chosen from the camera roll instead of the URL to the local file.  These base64-encoded bytes are obviously what I want to post to my web server.  The code as posted everywhere around the web now works fine (notice I gave up on the FileTransfer object and just post the bytes using AJAX):

function browseCameraRoll() 
{
	navigator.camera.getPicture( onPhotoLoadSuccess, onFail,
		{
		quality: 50,
		destinationType: Camera.DestinationType.DATA_URL,
		sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
		encodingType: Camera.EncodingType.PNG,
		} );
}

function onPhotoLoadSuccess( imageData )
{
	var url = 'http://myserver.com/UploadImage2';
	var params = { base64Image: imageData };

	$.ajax({
		   type: "POST",
		   url: url,
		   data: params,
		   success: function (returndata) 
		   {
			//alert( 'back from POST: ' + returndata.Status ); 
			grayscaleImage.src = "data:image/png;base64," + returndata.GrayscaleVersion
		   }} );
}

File Access APIs

Today I continued by learning the file access APIs.  I simply want to write a configuration file in isolated storage the first time the application runs, and then read it on each subsequent startup.  This is super simple, and from what I can tell, does not even require using PhoneGap.  The HTML5 File System APIs can be used to read and write files, create directories, etc. Here is a good write-up on the available APIs.  I thought since the FileWriter and FileReader objects are listed in Cordova’s PhoneGap API documentation, that I was getting an instance of the file through the HTML5 APIs, and then using PhoneGap APIs to read and write the file.  This doesn’t seem to be the case.  FileWriter and FileReader are HTML5 APIs.  Still a bit confused on why Cordova claims them as theirs (assuming just for the convenience of having all the docs in one place).

In any case, file access was a piece of cake – just followed the example here.