Choose an image from Camera or Gallery – PhoneGap

Require using device camera to allow the users to change or upload their image from the app either by taking a photo with the camera or choose from the photo gallery.

With camera plugin, you can access device camera to capture a picture and select existing photos from the device gallery.

It gives a response in the base64 format or path on the successful callback that can use in image source to show the preview of selected photo or save it to the server.

In this tutorial, I show how you can implement the plugin in your project and select photo with it.

Choose an image from camera or gallery - PhoneGap


  1. Add plugin
  2. Plugin Implementation
  3. Conclusion


1. Add plugin

  • Create a PhoneGap project and add platform in it.
F:\phonegap>cordova create myapp
F:\phonegap>cd myapp
F:\phonegap\myapp>cordova platform add android --save
  • Now add camera plugin to the project.
F:\phonegap>myapp>cordova plugin add cordova-plugin-camera
  • Copy the plugins directory from platforms/android/platform_www/ to www/ directory.


Specify the plugin in config.xml.

<plugin name="cordova-plugin-camera" spec="1" />


2. Plugin Implementation

In HTML create two buttons and an image element to show image preview.

Capture image from camera –

On the button click call method which takes 3 parameters – success handler, error handler, and options.

Define destinationType option and set its value to Camera.DestinationType.FILE_URL. On its successful callback, this will return path as response and use it in <img > source.

NOTE – To get response in base64 format you need to specify the destinationType: Camera.DestinationType.DATA_URL. Using it some time crash your application or out of memory issue even in low quality.

Pick image from Gallery –

Specify sourceType: Camera.PictureSourceType.PHOTOLIBRARY and allowEdit: true in options. This will also return path as a response. By define allowEdit: true option the user can edit or crop their selected photo.

Completed Code

<!DOCTYPE html>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />
        <title>PhoneGap app</title>

        <!-- Script -->
        <script type="text/javascript" src="cordova.js" ></script>
        <script type='text/javascript' src='jquery-3.0.0.js' ></script>
        <script type='text/javascript'>

            // Take photo from camera
      , onFail, { quality: 20,
                    destinationType: Camera.DestinationType.FILE_URL 

            // Select from gallery 
      , onFail, { quality: 50,
                    sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
                    allowEdit: true,
                    destinationType: Camera.DestinationType.FILE_URI

            // Change image source
            function onSuccess(imageData) {
                var image = document.getElementById('img');
                image.src = imageData + '?' + Math.random();;

            function onFail(message) {
                alert('Failed because: ' + message);

        <div style="margin:0 auto; width:30%!important;text-align: center;">
            <img src="img/cam2.jpg" id='img' style="width: 100px; height: 100px;">
        <div style="width:100%; text-align:center; padding:10px;">
            <button id='but_take'>Take photo</button>
            <button id='but_select'>Select photo from Gallery</button>


3. Conclusion

PhoneGap provides an easy way to interact with device camera with camera plugin. To store the selected file to the server require using the File Transfer plugin.

You can learn more about camera plugin from here.

In next article, I show how you can store selected image to the server.

6 thoughts on “Choose an image from Camera or Gallery – PhoneGap”

  1. Thanks for the demo app.

    Unfortunately the picture from gallery doesn’t show up in the box when selected?

    Could you take a quick look and update the code?

    Maybe insert it into a html5 canvas instead?

    • Update

      I managed to get it to work correctly. The code is correct.

      Thankyou Yogesh for your support via email. Keep up the good work!

  2. hello yogesh can you please suggest me how to select multiple images from mobile gallery and upload it on server using phonegap


Leave a Comment