Upload Images using PhoneGap & PHP

phonegap-php-mysql-tutorial

Hello friend,

So you want to upload images using cordova ?. Here I have written a simplified tutorial for uploading images with php backend also we have used camera plugin as image picker and cordova-plugin-filetransfer plugin for connecting remote server

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 server side code

Let's start with server side, I have a very simple php code which receives file & store it on uploads folder.so you must create uploads/ folder

<?php

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

?>

Important: Create a New Upload folder

Working with Cordova (PhoneGap)

Let's start with mobile app side.so we can start with creating a new Cordova project and add required platforms and plugins. Here we need to also need add camera plugin (cordova-plugin-camera) for taking a picture from the camera (Refer: https://codesundar.com/cordova-plugin-camera/ for more information about camera plugin)  & File transfer plugin (cordova-plugin-filetransfer) 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
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 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>

Cheers! Hope this helps.

If you faced any issue feel free to comment below.