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.

Could you check in your server what post params is it receiving? I had a similar problem, and finally found out that what was happening was that I wasn't sending the options object correctly — davids, Aug 01 '12 at 07:34
@davids Do you mean checking the `$_POST` variable in the server? I tried that and I get an empty array. I tried using `$_REQUEST` as well, just to check, and only the `fname` parameter that I supplied in the url is there. `$_FILES` turns up an empty array. — Ash Menon, Aug 01 '12 at 08:50

score 5 · Accepted Answer · answered Jan 08 '13 at 17:22

5

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

            });
        });
});

answered Jan 08 '13 at 17:22

Davor Zlotrg

6,020
2
33
51

Hey there DZL. I'm not actually working on this app anymore, but thanks for the code! I'll save this snippet and give it a try when I come across this again. Thanks :) Am marking your answer as accepted anyway. – Ash Menon Jan 09 '13 at 16:02
No problem, I was struggling with this same problem recently and it took me a lot of time to figure it out. – Davor Zlotrg Jan 09 '13 at 17:05
1

And the answer was very usefull to others (among me :) ), thanks – michel.iamit Jul 23 '13 at 19:06
Should this be `resolveLocalFileSystemURL` (instead of URI)? And/or, have things changed? – Mar 26 '16 at 22:05
@DZL i am also facing the similar issue but not able to fix it. can you please check this question http://stackoverflow.com/questions/40514847/ – Roxx Nov 10 '16 at 10:38
As of 1.0.0 or newer version of File, you should invoke `fileEntry.toURL()` instead of `fileObj.fullPath`. Also note that `resolveLocalFileSystemURI` is deprecated and you should be using `resolveLocalFileSystemURL` – mr5 Dec 05 '16 at 00:52

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

After puzzling a bit, it seems to me you can use the image uri directly....

see my answer here: (this works for me on android):

android phonegap camera and image uploading

edited May 23 '17 at 11:52

Community

1
1

answered Jul 25 '13 at 09:27

michel.iamit

5,788
9
55
74

1

Maybe they fixed it in the new cordova release to automatically convert uri to the file name but in 'cordova-2.2.0.js', the one that I am using I could upload the file, but I couldn't open it on the server. The only way I could open the file was to first call 'window.resolveLocalFileSystemURI' and than transfer it with the file name returned from 'resolveLocalFileSystemURI'. – Davor Zlotrg Jul 29 '13 at 16:00
Ok, that might be the case! – michel.iamit Aug 12 '13 at 11:28

Phonegap android unable to upload image using fileTransfer

2 Answers2

Linked