Reading image capture files in PhoneGap

5
votes

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.

4
javascriptiphoneioscordova

4 Answers

1
votes

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!

1
votes

The answer from jgarbers was of help to me but it did not solve the problem. I realized the camera stores photos in Temp folder instead of Document folder. Setting my local file system to temporary allowed it to find the correct location for the camera images.

window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, ...
0
votes

...

window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, ...

...

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

Ref. above jgarbers and Rik answers (solution has been tested successfully on iOs 7)

0
votes

you can user the file transfer plugin for uploading any file to the server.

//// pass your file uri to the mediafie param
function uploadFile(mediaFile) {
    var ft = new FileTransfer();
    path = mediaFile.fullPath;
    name = mediaFile.name;
////your service method url
    var objUrl = http://example.com;


    ft.upload(path,
        objUrl,
        function (result) {
            alert("Success");


        },
        function (error) {
            alert('Error uploading file ' + path + ': ' + error.code);
        },
        { fileName: name });
}