Unable to load image when selected from the gallery on Android 4.4 (KitKat) using PhoneGap Camera Plugin

Question

I'm trying to set the source of an img tag in my app based on the image chosen from the device image gallery using the PhoneGap/Cordova Camera Plugin.

It has worked previously as intended on older versions of Android (3.3) and works fine on iOS but now fails to resolve the image path on 4.4 (KitKat).

The returned path for the returned image url looks something like:

content://com.android.providers.media.documents/document/image%3A352

When I use this path to set as the image src via JavaScript, the URL cannot be resolved and therefore produces a load error. There is no issue when taking a picture with the camera, it only seems to occur when choosing an existing picture from the gallery.

I have tried encoding to base64 and also tried the method mentioned in the docs resolveLocalFileSystemURI(); but I have had no luck with these. I've also tried removing the camera plugin and rebuilding the app but no joy.

My guess is that something has changed with the way KitKat handles the gallery and PhoneGap/Camera plugin haven't been updated to accomodate for this yet.

Answer 1

A kind of really-very-dirty workaround works for me while this bug is fixed. Use in case of extreme necessity :)

if (imageURI.substring(0,21)=="content://com.android") {   photo_split=imageURI.split("%3A");   imageURI="content://media/external/images/media/"+photo_split[1]; } 

Answer 2

Something broke in Android 4.4 with the URI encoding of images.

A bug has been filed against Cordova here: https://issues.apache.org/jira/browse/CB-5398

In the docs for getPicture, under the Android Quicks section, it discusses this problem and points to a StackOverflow question with a workaround (edit the Camera plugin java code to force it to open the Gallery app instead of the Storage Access Framework app.)

It seems another thing you could do is set the destination type to DATA_URL.

Answer 3

Adobe assures me that that this problem will be fixed in 3.5.0. It is not fixed in 3.4. As 3.5.0 is scheduled to be release in mid-May, I'm just going to wait until then.

Adobe claims that this was not a change that could be made on the plugin level. It was a basic change in the cordova code. It's too bad it took so long for them to come up with this fix.

UPDATE: Cordova 3.5.0 was released on May 9. You can download it bia node and see if the problems are in fact solved.

Answer 4

Here is a simple fix to this problem:

replace this:

content://com.android.providers.media.documents/document/image%3A352

by this:

content://com.android.providers.media.documents/document/image%253A352

if you are using JavaScript you can use this code:

var path = content://com.android.providers.media.documents/document/image%3A352;
path = path.replace("%", "%25");

this technique force the uri to let pass "%3A" as it is, without changing it to ":", hope it will work for you !