Question

So It appears that I have stumbled across a very bizarre issue with phonegap 2.2.0.

I am trying to take a picture, and send it through the filetransfer plugin, like so:

if(navigator.camera) {
        navigator.camera.getPicture(function(imageURI){
            console.log('captured image = '+imageURI);
            $('#photoConfirmation .image-preview').attr('src', imageURI);
            self.photoURI = imageURI;
            $('#photoConfirmation').show().simpledialog2({
                'mode' : 'bool',
                'prompt' : '',
                'useModal': true,
                'zindex':1001,                    
                'callbackClose': function(e){
                    $('#photoConfirmation').hide();
                }
            });
        }, 
        function(message){
            alert('Failed to get picture: ' + message);
        }, {
            sourceType:1, 
            quality: 50, 
            destinationType:1
        });
    } else {
        alert('Camera is not supported on this device.');
    }    

 var options = new FileUploadOptions();
    options.fileKey="files[]";
    options.fileName = 'image_something'.jpg';
    options.mimeType="image/jpeg";
    options.chunkedMode = false;

    var params = new Object();
    params.extraData= 'object-' + anObject.id;

    options.params = params;
    var ft = new FileTransfer();
    ft.upload(imageURI, "http://someupload.com/destination/url", function(r){alert('Finished upload!');}, function(error){console.log(error);alert('Error uploading image with code: ' +error.code)}, options);

The problem is, this shows up in the preview, but does not upload! The picture is definitely getting captured because I see it in the image preview… I could’ve sworn I did something like this before. Does anyone see anything that I am doing wrong here?

Answer 1

There is a reference implementation of the FileTransfer plugin (which uses the captured photo from a camera) on the Cordova API Documentation, which many differences in it’s implementation from yours. Reading though your code it looks like you are firing off a File Transfer before you capture the photo (and create the imageURI). Also you are using numerical constants for sourceType and destinationType. Though these are most likly not causing the problem you are experiencing, the correct forms for these is:

destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY

Here is an example with some small typo fixes (I’m assuming that extra ' in the fileName isn’t a part of your code) of what should be a working version:

if (navigator.camera) {
  navigator.camera.getPicture(

  function (imageURI) {
    console.log('captured image = ' + imageURI);
    $('#photoConfirmation .image-preview').attr('src', imageURI);
    self.photoURI = imageURI;
    $('#photoConfirmation').show().simpledialog2({
      'mode': 'bool',
      'prompt': '',
      'useModal': true,
      'zindex': 1001,
      'callbackClose': function (e) {
        $('#photoConfirmation').hide();
        var options = new FileUploadOptions();
        options.fileKey = "files[]";
        options.fileName = 'image_something.jpg';
        options.mimeType = "image/jpeg";
        options.chunkedMode = false;
        var params = new Object();
        params.extraData = 'object - ' + anObject.id;
        options.params = params;
        var ft = new FileTransfer();
        ft.upload(imageURI, "http://someupload.com/destination/url", function (r) {
          alert('Finished upload!');
        }, function (error) {
          console.log(error);
          alert('Error uploading image with code: ' + error.code)
        }, options);
      }
    });
  },

  function (message) {
    alert('Failed to get picture: ' + message);
  }, {
    sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
    quality: 50,
    destinationType: navigator.camera.DestinationType.FILE_URI
  });
} else {
  alert('Camera is not supported on this device.');
}