Phonegap camera plugin not working in iOS

Question

I'm building an application using Phonegap v6 and I'm using the cordova camera plugin to upload a picture to the server, and I've set everything correctly.

When I test it in Phonegap Developer iOS App it works, I can choose and image and upload it.

But when I compiled the IPA file and installed it on my iPhone, when I click on select picture button, nothing happens, BUT after I click it and press any form input, the gallery will open and I can choose an image, but the image won't get uploaded. No feedback at all.

Again it is working on the Phonegap Mobile app, but not in the standalone IPA.

Here's the JS function:

// take picture from camera
$('#but_take').click(function(){
  navigator.camera.getPicture(onSuccess, onFail, { quality: 20,
      destinationType: Camera.DestinationType.FILE_URL
  });
});

// upload select
$("#but_select").click(function(){
  navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
      allowEdit: true,
      destinationType: Camera.DestinationType.FILE_URI
  });
});

// Change image source and upload photo to server
function onSuccess(imageURI) {
  // Set image source
  var image = document.getElementById('img');
  image.src = imageURI  + '?' + Math.random();

  var options = new FileUploadOptions();
  options.fileKey = "file";
  options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
  options.mimeType = "image/jpeg";

  var params = {};
  params.value1 = localStorage.phone;
  params.value2 = "param";

  options.params = params;
  options.chunkedMode = false;

  var ft = new FileTransfer();
  ft.upload(imageURI, 
"hiddenUrlHere", function(result){
      myApp.alert(result.response, "Profile Updated");
  }, function(error){
      myApp.alert(JSON.stringify(error), "Error");
  }, options);
}
function onFail(message) {
  myApp.alert(message, "Error");
}

the HTML snippet:

<img src="img/cam2.jpg" id='img' style="width: 100px; height: 
100px;">

<button id='but_select'>Select photo from Gallery</button>

config.xml file:

<?xml version='1.0' encoding='utf-8'?>
<widget id="appIDhere" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>AppName</name>
    <description>
        Senior Project By  name
    </description>
    <author email="[email protected]" href="http://cordova.io">
        name here
    </author>
    <content src="index.html" />
    <access origin="*" />
    <access origin="content:///*" />
    <allow-navigation href="*" />
    <allow-intent href="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <preference name="android-minSdkVersion" value="14" />
        <allow-intent href="market:*" />
            <feature name="Camera">
                <param name="android-package" value="org.apache.cordova.camera.CameraLauncher"/>
            </feature>
    </platform>
    <platform name="ios">
        <access origin="*" />
        <access origin="content:///*" />
        <allow-navigation href="*" />
        <allow-intent href="*" />
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <preference name="BackupWebStorage" value="none" />
        <edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
          <string>need to photo library access to upload pictures for posts</string>
        </edit-config>
        <feature name="StatusBar">
            <param name="ios-package" onload="true" value="CDVStatusBar" />
        </feature>
        <feature name="Camera">
            <param name="ios-package" value="CDVCamera" />
        </feature>
        <feature name="Keyboard">
            <param name="ios-package" onload="true" value="CDVKeyboard" />
        </feature>
    </platform>
    <preference name="DisallowOverscroll" value="true" />
    <plugin name="cordova-plugin-console" spec="~1.0.1" />
    <plugin name="cordova-plugin-statusbar" spec="~1.0.1" />
    <plugin name="phonegap-plugin-push" source="npm" spec="~1.8.0">
        <param name="SENDER_ID" value="981753167590" />
    </plugin>
    <plugin name="cordova-plugin-camera" spec="https://github.com/apache/cordova-plugin-camera" />
    <plugin name="cordova-plugin-keyboard" spec="https://github.com/cjpearson/cordova-plugin-keyboard" />
    <plugin name="cordova-plugin-whitelist" spec="~1.3.3" />
</widget>

Content Security Metatag:

 <meta http-equiv="Content-Security-Policy" content="default-src *;font-src 'self' data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">

Again, all plugins are installed and correctly linked, everything is working perfectly in the Phonegap iOS App, but not in the standalone IPA.

IS there anything I'm missing? Maybe some configuration, not Javascript coding, maybe permissions..

And btw the Android APK is doing the same.

Answer 1

For the camera problem you have to add gap: to the default-src of the Content-Security-Policy meta tag.

Example: <meta http-equiv="Content-Security-Policy" content="default-src * gap:;font-src 'self' data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">

For the upload problem you have to install the cordova-plugin-file-transfer.

On the Phonegap developer app it works because it includes all the plugins and also have the gap: on their Content-Security-Policy meta tag.

If you want to see errors, you can enable remote debugging in your device, that will allow to inspect the app and see errors on your desktop Safari.