Phonegap-php-mysql-login-tutorial
phonegap-php-mysql-tutorial
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

Please login to download the latest source code

To avoid spam user, we only have social login • we do not post anything on your wall


Secured • No Spam

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

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 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>
Please login to download the latest source code

To avoid spam user, we only have social login • we do not post anything on your wall


Secured • No Spam

Cheers! Hope this helps.

If you faced any issue feel free to comment below.