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


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


  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.

    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, function(message) {
 alert('get picture failed');
 }, {
 quality: 100,

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

3. Uploading File to Remote Server

    <title>File Transfer Example</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
        var camearaOptions = {
            quality: 100,
        function getImage() {
  ,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, "",
            function (result) {
            function (error) {
            }, options);

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

Please login to download source code Login Here
Sundaravel M

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