cordova - Phonegap android unable to upload image using fileTransfer

Question

I'm trying to capture an image using the camera and upload it to my AJAX endpoint. I've confirmed that this endpoint can accept the file (I created a test HTML file on my desktop that sends a form with an image in it). I'm using Cordova (phonegap) 1.7.0, and am trying to get the fileTransfer() to work. Here is the link for the documentation that I followed:

http://docs.phonegap.com/en/1.0.0/phonegap_file_file.md.html#FileTransfer

The success callback triggers, but no $_FILES data is to be found on the endpoint.

I then found this article:

http://zacvineyard.com/blog/2011/03/25/upload-a-file-to-a-remote-server-with-phonegap/

Which suggested using options.chunkedMode = false. Now the upload takes an age and a half, before eventually failing with an error code of 3, which I believe is FileError.ABORT_ERR.

Am I missing something?

My code from the app below:

     navigator.camera.getPicture(function(imageURI){           
        console.log('take success! uploading...');
        console.log(imageURI);
        var options = new FileUploadOptions();
        options.fileKey = 'file';
        options.fileName = 'spot_image.jpeg';
        options.mimeType = 'image/jpeg';
        var params = new Object();
        params.spot_id = 1788;
        params.param2 = 'something else';
        options.params = params;        
        options.chunkedMode = false;
        var ft = new FileTransfer();
        ft.upload(imageURI,serverURL + '/ajax.php?fname=appuploadspotimage',function(r){
            console.log('upload success!');
            console.log(r.responseCode);
            console.log(r.response);
            console.log(r.bytesSent);
        },function(error){
            console.log('upload error')
            console.log(error.code);
        },options,true);
        console.log('after upload');



    },function(message){
       console.log('fail!');
       console.log(message);
    },{ 
        quality: 50,
        destinationType: navigator.camera.DestinationType.DATA_URL,
        sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
    });

serverURL is defined as the domain for my AJAX endpoint, which has been whitelisted in cordova.xml.

I've seen a number of questions here in SO regarding this, which varying opinions as to whether chunkedMode should be used. Anyone having this issue as well?

Am trying this on a Samsung Galaxy S, running ICS.

May the person who helps me solve this issue mysteriously inherit a beer factory.

Answer 1

You can not use imageUri that you get from camera success callback in FileTransfer upload method, you have to first resolve uri as a filename like this:

navigator.camera.getPicture(function(imageURI){

      window.resolveLocalFileSystemURI(imageUri, function(fileEntry) {
            fileEntry.file(function(fileObj) {

                var fileName = fileObj.fullPath;

                //now use the fileName in your method
                //ft.upload(fileName ,serverURL + '/ajax.php?fname=appuploadspotimage'...);

            });
        });
});