Reading image capture files in PhoneGap

Question

I'm working on a PhoneGap application that captures images using the camera and, later, uploads them. There are two modes of operation for camera in PhoneGap: raw base64 encoded data or a file URI.

The docs themselves say:

Note: The image quality of pictures taken using the camera on newer devices is quite good. Encoding such images using Base64 has caused memory issues on some of these devices (iPhone 4, BlackBerry Torch 9800). Therefore, using FILE_URI as the 'Camera.destinationType' is highly recommended.

So I'm keen to use FILE_URI option. This works great and you can even show the images in IMG tags. The URL looks like this:

file://localhost/var/mobile/Applications/4FE4642B-944C-449BB-9BD6-1E442E47C7CE/tmp/photo_047.jpg

However, at some point later I want to read the contents of the file to upload to a server. I was going to do this using the FileReader type. This doesn't work and I think it's because I can't access the file at the URL above.

The error code I get back from readDataUrl is 1 > FileError.NOT_FOUND_ERR = 1;

Any ideas how I can get to the file? I tried just accessing the last part of the path (photo_047.jpg) based on another sample I saw but no luck.

Answer 1

I'm just getting started with PhoneGap, and given the age of this question you may have found an answer already, but I'll give it a try anyway.

First, would you be able to use the built-in FileTransfer object? It takes a file: URI as an argument.

If FileTransfer won't work for you, and you need to read the file data yourself, you'll need the PhoneGap File objects, like FileReader , as you said. But most of those expect a plain pathname -- not a URI -- to specify the file to work with. The reason you're getting NOT_FOUND_ERR is because it's trying to open a file named file:/localhost/var....

Here's a quick one-liner to extract the path part from your URI:

var path = /file:\/\/.*?(\/.*)/.exec(fileuri)[1];

Hope this helps!