This article, I’m going to explain How to Upload Images to the server using PhoneGap File Transfer Plugin.

Requirements

  • PHP based Web Server (you can use local web servers)
  • Cordova Camera Plugin (cordova-plugin-camera)
  • Cordova File Transfer Plugin (cordova-plugin-filetransfer)

Steps

  1. Writing Simple PHP code for receiving files from Mobile App
  2. Camera Plugin is used for accessing mobile Gallery
  3. Upload Images using File transfer plugin

Writing PHP code: This code allows you to receive files from mobile app and store into upload folder.

<?php
    header('Access-Control-Allow-Origin: *');
    $new_image_name = urldecode($_FILES["file"]["name"]).".jpg";
    move_uploaded_file($_FILES["file"]["tmp_name"], "upload/".$new_image_name);
?>

Note: Create a New Upload folder

Working with Mobile App:

Let’s create a new Cordova project for file transfer and add required plugins for file transfer. Here we need to add camera plugin for taking a picture from the camera. file transfer plugin for uploading pictures to web server.

cordova create FileTransfer com.codesundar.filetransfer FileTransfer
cd FileTransfer

cordova platform add android

cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-file-transfer

2. Accessing Gallery using Camera Plugin

navigator.camera.getPicture(uploadPhoto, function(message) {
 alert('get picture failed');
 }, {
 quality: 100,
 destinationType: navigator.camera.DestinationType.FILE_URI,
 sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
 });

uploadPhoto is a success callback function & SourceType PHOTOLIBRARY used for accessing photo gallery

3. Uploading File to Remote Server

<html>
<head>
    <title>File Transfer Example</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
        var camearaOptions = {
            quality: 100,
            destinationType: navigator.camera.DestinationType.FILE_URI,
            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
        }
        function getImage() {
            navigator.camera.getPicture(uploadPhoto,onError, camearaOptions);
        }

        function onError(err){ alert(error); }

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

            var params = new Object();
            params.value1 = "test";
            params.value2 = "param";
            
            options.params = params;
            options.chunkedMode = false;

            var ft = new FileTransfer();
            ft.upload(imageURI, "http://192.168.1.4/phonegap/upload/upload.php",
            function (result) {
                console.log(JSON.stringify(result));
            },
            function (error) {
                console.log(JSON.stringify(error));
            }, options);
        }
    </script>
</head>

<body>
    <button onclick="getImage()">Upload a Photo</button>
</body>

</html>
Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - Google+