1

After trying for several hours, I decided to ask for community help on this issue. I am developing an Ionic app and I need to upload an image from Cordova Camera to Cloudinary. Now we can do it either by clicking the image from the camera (which loads image in cache) or by picking an image which is already saved in the gallery. I am able to click the image and also pick it up from the gallery, but I am not able to upload the image binary to Cloudinary.

I tried with sending binary data through $cordovaCamera, $cordovaFile, and also by passing URL but failed both ways. Is there something I am missing?

Here is what I configured for my camera:

vm.takePicture = function () {
            var options = { 
                quality : 100, 
                destinationType : Camera.DestinationType.DATA_URL, 
                //destinationType: Camera.DestinationType.FILE_URI,
                sourceType : Camera.PictureSourceType.CAMERA, 
                allowEdit : true,
                encodingType: Camera.EncodingType.JPEG,
                targetWidth: 300,
                targetHeight: 300,
                popoverOptions: CameraPopoverOptions,
                saveToPhotoAlbum: false
                //saveToPhotoAlbum: true
            };

 vm.UploadPicture = function () {
            vm.uploadinProgress = true;
            var options = new FileUploadOptions();
            options.fileKey = "file";
            options.fileName = Image.jpeg;
            options.chunkedMode = false;
            options.trustAllHosts = true;
 $cordovaFile.UploadFile("http://myserver.com/images", vm.imgSrc, options).then(function(result) {
                console.log("Success");
            },function error() {
                console.log('Error: ' + error);
            });
};
    };
Tomislav Stankovic
  • 3,080
  • 17
  • 35
  • 42
Bhishma
  • 53
  • 9

1 Answers1

3

I opted to upload the image directly to cloudinary skipping the extra overhead of server upload.

This can be achieved with "Direct upload" feature of cloudinary which is built for mobile devices. You need to set "upload_preset" parameter in you post request.

//Settings to pick a camera capture

 vm.takePicture = function () {
            var options = {
                quality: 50,
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: Camera.PictureSourceType.CAMERA,
                encodingType: Camera.EncodingType.JPEG,
            };

//Setting for gallery picture

vm.selectPicture = function () {
            var options = {
                quality: 50,
                allowEdit: false,
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                encodingType: Camera.EncodingType.JPEG
            };

//And then simply use the IONIC file transfer lib

 var ft = new FileTransfer();
 ft.upload(vm.Image, server, win, fail, ftOptions, true);
Bhishma
  • 53
  • 9
  • Bishma. would you be able to show more details of the ft.upload function. especially how you go about configuring the upload_preset? i used https://calendee.com/2015/01/15/posting-images-to-cloudinary-in-ionic-apps/ but doesn't know where the error occur to cause it not to upload. – WABBIT0111 Feb 13 '16 at 16:52
  • http://stackoverflow.com/questions/35238081/ionic-take-pictures-cannot-upload-to-cloudinary-using-unsigned-upload?noredirect=1#comment58256894_35238081 – WABBIT0111 Feb 13 '16 at 17:53