Phonegap camera implementation

We are currently working on the implementation of a new App for a customer using the Phonegap framework to simplify development for multiple platforms. One of the requirements the customer came up with is the possiblity for a user of the App to upload photo’s that he made with the camera of his mobile device. Is this possible using the Phonegap framework? Of course it is, and this blog will show you how.

Photo upload using the Phonegap camera object

Several steps are needed to implement the photo upload functionality:

  1. Make sure your App has access to the mobile device’s camera functionality.
  2. Get you App to open the device’s native camera dialog.
  3. Get the photo from the native camera dialog.
  4. Upload the photo to your server.

1. Access to the device’s camera functionality

It is necessary to configure in your Apps’s Phonegap configuration that you’ll be using the Phonegap camera plugin.We are using Phonegap Build, which means that a single configuration file (config.xml) can be used for both Android and iOS.

The following lines have to be added to the config.xml:

<feature name=""/>
<feature name=""/>

Note that the second line is needed because on Android you need to configure the user permission WRITE_EXTERNAL_STORAGE, see the Phonegap API documentation. This is needed to store the picture taken with the camera on the local file system.

When you are not using Phonegap Build, this needs to be done differently for Android and iOS.


<plugin name="Camera" value="org.apache.cordova.CameraLauncher" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />


<plugin name="Camera" value="CDVCamera" />

2. Open the device’s native camera dialog

First, you want to tell the user that it is possible to upload a photo in the App. We added a camera icon to the page and added an onclick event to that icon. This onclick event opens a confirm dialog asking the user if he wants to 1) Make a photo and upload it or 2) Select a photo from the device’s gallery and upload it. After that, the Javascript method listed below is executed.

function onConfirm(buttonIndex) {
  if(buttonIndex == 1) { 
    // User wants to make a photo using the camera
    sourceType = Camera.PictureSourceType.CAMERA;
  } else if (buttonIndex == 2) {
    // User wants to select a photo from the gallery
    sourceType = Camera.PictureSourceType.PHOTOLIBRARY;
  } else {
    // cancelled

As you can see, this method does nothing more than setting the correct sourceType, which is a global var in the Javascript file and executing the method captureImage, which contains the magic. captureImage is listed below.

function captureImage() {
    { quality:60,
      allowEdit:true, // ignored by Android
      destinationType:Camera.DestinationType.DATA_URL, //base64

The captureImage method calls the Phonegap method, which is the bridge to the native camera functionality of your mobile device. Some configuration settings are provided, i.e. the destinationType that tells Phonegap we want a base64 encoded image String, the encodingType to configure the image encoding type and the sourceType to tell the device that we want to make a new picture or select an existing image from the gallery. See the Phonegap API documentation for the complete list of configuration properties.

3. Get the photo from the native camera dialog

In order to obtain the photo from the native camera dialog, the onSuccess callback function listed in the captureImage method above needs to be implemented. Our implementation of the onSuccess method is listed below.

function onSuccess(imageData) {
  var theImage = "data:image/jpeg;base64,"+imageData;

  // immediately change the image in the view 
  clickedImage.src = theImage;

  // And now upload the photo to the server

4. Upload the photo to your server

To actually upload the photo to the server, we have extended the onSuccess callback function with an Ajax call to our server, which is shown in the listing below.

function onSuccess(imageData) {
  var theImage = "data:image/jpeg;base64,"+imageData;

  // immediately change the image in the view 
  clickedImage.src = theImage;

  $.mobile.loading('show'); // Show the spinner
       'personid': getUser().personID,
       'photo': imageData
    function(data) {
      if (data.success) {
        alert('Saving photo succeeded');
      } else {
        alert('Saving photo failed');
      $.mobile.loading('hide'); // Hide the spinner

On our server we store the base64 encoded JPEG file in our database for the user that uploaded it. The server side code is not included here.

Phonegap camera

As we described above, it is very easy to implement a photo upload mechanism in your Phonegap application using the Phonegap camera object. A few simple lines of Javascript code in your App is enough. Enjoy!

Using PhoneGap Build? You should.. if possible

Unless you need to add your own native code to your PhoneGap project, you can use the excellent PhoneGap Build service. If you do, you may also want to use our nice new app: Buildmeister, a mobile app for easily managing your PhoneGap Build apps.

Download Buildmeister for these platforms:

Android app on Google Play

Buildmeister - X-Services