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

<span class="php"><span class="hljs-meta"><?php</span>

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

<span class="hljs-meta">?></span></span>

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 <span class="hljs-keyword">create</span> FileTransfer com.codesundar.filetransfer FileTransfer
cd FileTransfer

cordova platform <span class="hljs-keyword">add</span> android

cordova <span class="hljs-keyword">plugin</span> <span class="hljs-keyword">add</span> cordova-<span class="hljs-keyword">plugin</span>-camera
cordova <span class="hljs-keyword">plugin</span> <span class="hljs-keyword">add</span> cordova-<span class="hljs-keyword">plugin</span>-<span class="hljs-keyword">file</span>-transfer
navigator.camera.getPicture(uploadPhoto, function(message) {
<span class="hljs-attribute">alert('get picture failed');
}, {
quality</span>: 100,
destinationType: navigator<span class="hljs-variable">.camera</span><span class="hljs-variable">.DestinationType</span><span class="hljs-variable">.FILE_URI</span>,
sourceType: navigator<span class="hljs-variable">.camera</span><span class="hljs-variable">.PictureSourceType</span><span class="hljs-variable">.PHOTOLIBRARY</span>
});

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

3. Uploading File to Remote Server

<span class="hljs-tag"><<span class="hljs-name">html</span>></span>

<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">title</span>></span>File Transfer Example<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"cordova.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-keyword">var</span> camearaOptions = {
            <span class="hljs-attr">quality</span>: <span class="hljs-number">100</span>,
            <span class="hljs-attr">destinationType</span>: navigator.camera.DestinationType.FILE_URI,
            <span class="hljs-attr">sourceType</span>: navigator.camera.PictureSourceType.PHOTOLIBRARY
        }

        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getImage</span>(<span class="hljs-params"></span>) </span>{
            navigator.camera.getPicture(uploadPhoto, onError, camearaOptions);
        }

        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onError</span>(<span class="hljs-params">err</span>) </span>{
            alert(error);
        }

        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">uploadPhoto</span>(<span class="hljs-params">imageURI</span>) </span>{
            <span class="hljs-keyword">var</span> options = <span class="hljs-keyword">new</span> FileUploadOptions();
            options.fileKey = <span class="hljs-string">"file"</span>;
            options.fileName = imageURI.substr(imageURI.lastIndexOf(<span class="hljs-string">'/'</span>) + <span class="hljs-number">1</span>);
            options.mimeType = <span class="hljs-string">"image/jpeg"</span>;
            <span class="hljs-keyword">var</span> ft = <span class="hljs-keyword">new</span> FileTransfer();
            ft.upload(imageURI, <span class="hljs-string">"http://192.168.1.4/phonegap/upload/upload.php"</span>,
                <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result</span>) </span>{
                    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">JSON</span>.stringify(result));
                },
                <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>{
                    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">JSON</span>.stringify(error));
                }, options);
        }
    </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>

<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"getImage()"</span>></span>Upload a Photo<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>

<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

Cheers! Hope this helps.

If you faced any issue feel free to comment below.