Capture and Upload photo to server with PhoneGap

File Transfer plugin allows to upload photo or files to the remote server from the PhoneGap app.

In this tutorial, I am using Camera plugin to take a photo from camera or gallery. It will return response either in base64 format or path. You can use jQuery AJAX to upload photo in base64 format.

But it is not the better way because it works well when the image quality is low but when the image is taken from better camera device or photo quality is good then it increases the image size and takes a longer time to process, crash the app, slow down the device.

While adding File transfer plugin it will automatically download File plugin also that use to manipulate files in the device.

In the demonstration, I am creating a basic app where upload the selected photo to the server.

Capture and Upload photo to server with PhoneGap


Contents

  1. Add plugin
  2. PHP
  3. Plugin Implementation
  4. 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 file transfer plugin to the project.
F:\phonegap>myapp>cordova plugin add cordova-plugin-file-transfer
  • Copy the plugins directory from platforms/android/platform_www/ to www/ directory.

config.xml

Specify the preference and plugin in config.xml.

<preference name="AndroidPersistentFileLocation" value="Compatibility" />
<plugin name="cordova-plugin-file-transfer" spec="1" />

 

2. PHP

Create a upload directory to store images and a upload.php file.

Generate a new name and store the file to upload directory.

Completed Code

<?php

// Set new file name
$new_image_name = "newimage_".mt_rand().".jpg";

// upload file
move_uploaded_file($_FILES["file"]["tmp_name"], 'upload/'.$new_image_name);
echo $new_image_name ;

 

3. Plugin Implementation

When an image is successfully selected from the device either by camera or gallery then show image preview by changing the <img> source and upload photo by calling upload() method from FileTransfer object.

In the method pass image path and server file URL for upload handling,

Completed Code

<!DOCTYPE html>
<html>
    <head>
        <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'>

        $(document).ready(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 = "test";
                params.value2 = "param";

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

                var ft = new FileTransfer();
                ft.upload(imageURI, "http://demo.makitweb.com/phonegap_camera/upload.php", function(result){
                    alert('successfully uploaded ' + result.response);
                }, function(error){
                    alert('error : ' + JSON.stringify(error));
                }, options);
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
        });
        </script>
    </head>
    <body>
        <div style="margin:0 auto; width:30%!important;text-align: center;">
            <img src="img/cam2.jpg" id='img' style="width: 100px; height: 100px;">
        </div><br/>

        <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>
        </div>
    </body>
</html>

 

4. Conclusion

This post is continuity of the previous post where I showed how you can capture photo from camera and select image from the photo gallery.

With File Transfer plugin you can upload any type of files to the server.

Related Post

Spread the love

One Comment

  1. Phil Ponce said:

    Hello Yogesh – I’m trying to upload a photo to a server via Cordova Tools in VS2017. I’ve hit a wall and am curious what the “best practice” is. I’m using AZURE and have established a blob storage but I’m totally confused with all the documentation. I have my own web server and would prefer to use that for image storage. Have you any advice on how best to move forward?

    December 3, 2017
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *