Learn App Making
with Ionic, Cordova & Flutter.

Start Here Buy Themes

Upload Image using Cordova File Transfer Plugin

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 & stores 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 a 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.