Posted on by & filed under Content - Highlights and Reviews, Mobile Development.

In the PhoneGap: Storing and Retrieving with the FileSystem, we saw how to use PhoneGap’s implementation of the W3C file APIs to read and write simple file data to a device’s permanent storage.

At present, binary data is passed back and forth as base-64 encoded UTF-8 strings – essentially, the same format as a dataURL that would be used as the src of an image tag. Unfortunately, right now you can’t write binary data – given how PhoneGap communicates with the native layer through string-based messages, it’s not possible.

To read data, there is a handy readAsDataURL function that acts just like the readAsText function. Here’s a complete JavaScript example – you can assume we have an <img alt=”” /> tag with the id “foo” somewhere on our page, and an image, “foo-hi-res.png” on our filesystem (perhaps by the FileTransfer API). I’m first including the useful $ and failCB examples from the previous tutorial:

It’s a pretty long-winded, asynchronous API, but the flow is all sequential – get a filesystem, get an entry, create a reader, and read the data. With that, you should have the image on your page.

Give it a try!

Safari Books Online has the content you need

Check out these Phonegap books available from Safari Books Online:

PhoneGap Beginner’s Guide, written by Andrew Lunny, the author of this post, will show you how to use the PhoneGap mobile development framework to target multiple mobile platforms: iOS, Android, BlackBerry, and more with a single application. With PhoneGap, you can use existing web development skills, instead of learning a new environment for every platform on the market.
Using HTML, CSS, and Javascript, PhoneGap allows you to jump into the mobile world and develop apps for iPhone, Android, and the BlackBerry, and Beginning PhoneGap will help show you how to best take advantage of PhoneGap.
Beginning PhoneGap: Mobile Web Framework for JavaScript and HTML5 is a definitive, one-of-a-kind book that teaches the fundamentals and strategies behind cross-platform mobile application development. Instead of learning languages like Objective-C, focus on building apps from day one for Android, iOS, Blackberry, WebOS and Symbian—without the complexities of these platforms.

About the Author

  Andrew Lunny is a software developer based in San Francisco, and the author of PhoneGap: Beginner’s Guide, from Packt Publishing. He currently works at Adobe on the PhoneGap Build project, building thousands of apps a day for five different mobile platforms. He is also responsible for writing cogent error messages when something inevitably goes wrong. You can follow him on Twitter at @alunny.

Tags: android, Binary FileSystem, blackberry, iOS, PhoneGap,

2 Responses to “PhoneGap Tip: Binary FileSystem Data”

  1. gudiq

    Did you mean that capturing an image from the device camera and saving it in local documents directory is not possible for now? I’m currently searching solution for this when I stumbled in this blog. Your inputs are very much appreciated.

  2. Andrew Lunny

    That’s correct – using PhoneGap’s JavaScript APIs, you would only be able to save the base-64 encoded data for the image.