How to retrieve POST data from PhoneGaps File Transfer API

Question

I'm using Phone Gaps (Cordova 2.1) file transfer API to post an image from the users photo library to my server. The file transfer API seems to be working fine. I'm just puzzled about retrieving this information on my server.

Ideally, what I need to do is retrieve the image then upload it to my server. However, I can't seem to retrieve any information from the file transfer?

My JavaScript code (posting image data) is:

function onDeviceReady() {

            // Retrieve image file location from specified source
            navigator.camera.getPicture(uploadPhoto,
                                        function(message) { alert('get picture failed'); },
                                        { quality: 50, 
                                        destinationType: navigator.camera.DestinationType.FILE_URI,
                                        sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY }
                                        );

        }

        function uploadPhoto(imageURI) {
            var options = new FileUploadOptions();
            options.fileKey="file";
            options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
            options.mimeType="image/jpeg";

            var params = {};
            params.value1 = "test";
            params.value2 = "param";

            options.params = params;

            var ft = new FileTransfer();
            ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);
        }

        function win(r) {
            console.log("Code = " + r.responseCode);
            console.log("Response = " + r.response);
            console.log("Sent = " + r.bytesSent);
        }

        function fail(error) {
            alert("An error has occurred: Code = " + error.code);
            console.log("upload error source " + error.source);
            console.log("upload error target " + error.target);
        }

My server side code is:

 $paramValue = $_POST['fileKey']; //Undefined variable
 $paramValue2 = $_POST['options']; //Undefined variable
$paramValue3 = $paramValue2['fileKey'] //Undefined variable

I've also tried:

//POST variable
$paramValue = $_POST['params'];
echo "Param Value1: " . $paramValue['value1']; //Should return "test"

I've also tried:

//POST variable
$paramValue = $_POST['options'];
echo "Param Value1: " . $paramValue['options']['params']['value1']; //Should return "test"

All I'm getting is undefined variable errors?

Any help would be much appreciated, thanks!

Answer 1

On http://some.server.com you can have your /var/www/ directory, in this directory you need upload.php and the code in this directory should move your image to the folder

/var/www/TEST/

<?php
   print_r($_FILES);
   $new_image_name = "YEAH.jpg";
   move_uploaded_file($_FILES["file"]["tmp_name"], "/var/www/TEST/".$new_image_name);
?>

That is the only extra thing you need.

Prerequisite:

XAMPP LAMP WAMP or MAMP on your http://some.server.com

For clarity, this is the JavaScript and HTML just to show you how my upload.php file fits in: In your head

<script type="text/javascript" charset="utf-8">

// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
function onDeviceReady() {
    console.log("device ready");
    // Do cool things here...
}

function getImage() {
    // Retrieve image file location from specified source
    navigator.camera.getPicture(uploadPhoto, function(message) {
                alert('get picture failed');
            },{
                quality: 50,
                destinationType: navigator.camera.DestinationType.FILE_URI,
                sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
            }
    );

}

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, "http://some.server.com/TEST/upload.php", win, fail, options);
}

function win(r) {
    console.log("Code = " + r.responseCode.toString()+"\n");
    console.log("Response = " + r.response.toString()+"\n");
    console.log("Sent = " + r.bytesSent.toString()+"\n");
    alert("Code Slayer!!!");
}

function fail(error) {
    alert("An error has occurred: Code = " + error.code);
}

</script>

</head>

and this is what I have in my body

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

Answer 2

One additional thing that is often overlooked: This section on the client js file:

options.fileKey="file";

Must match this part on the server side:

$_FILES["file"]

Otherwise, you'll get an error that would not point to this fact. This may sound obvious for some, but it could save others an hour or two of pulling hairs.