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'...);

            });
        });
});