Upload image with ionic + cloudinary

Question

I want to upload a picture from my device in a back-end storage. I think that more attractive to use cloudinary. But, I don't know how I use this framework with ionic. Can't you give me a easy example?

I have add on my Utils.js the service:

(function () {
    function ius($q, $ionicLoading, $cordovaFile, $translate ) {  //CLOUDINARY_CONFIGS
        var service = {};
        service.uploadImage = uploadImage;
        return service;
        function uploadImage(imageURI) {
            var deferred = $q.defer();
            var fileSize;
            var percentage;
            // Find out how big the original file is
            window.resolveLocalFileSystemURL(imageURI, function (fileEntry) {
                fileEntry.file(function (fileObj) {
                    fileSize = fileObj.size;
                    // Display a loading indicator reporting the start of the upload
                    $ionicLoading.show({ template: 'Uploading Picture : ' + 0 + '%' });
                    // Trigger the upload
                    uploadFile();
                });
            });
            function uploadFile() {
                // Add the Cloudinary "upload preset" name to the headers
                var uploadOptions = {
                    params: { 'upload_preset': CLOUDINARY_CONFIGS.UPLOAD_PRESET }  //CLOUDINARY_CONFIGS.UPLOAD_PRESET
                };
                $cordovaFile
                  // Your Cloudinary URL will go here
                  .uploadFile(CLOUDINARY_CONFIGS.API_URL, imageURI, uploadOptions)  //

                  .then(function (result) {
                      // Let the user know the upload is completed
                      $ionicLoading.show({ template: 'Upload Completed', duration: 1000 });
                      // Result has a "response" property that is escaped
                      // FYI: The result will also have URLs for any new images generated with 
                      // eager transformations
                      var response = JSON.parse(decodeURIComponent(result.response));
                      deferred.resolve(response);
                  }, function (err) {
                      // Uh oh!
                      $ionicLoading.show({ template: 'Upload Failed', duration: 3000 });
                      deferred.reject(err);
                  }, function (progress) {
                      // The upload plugin gives you information about how much data has been transferred 
                      // on some interval.  Use this with the original file size to show a progress indicator.
                      percentage = Math.floor(progress.loaded / fileSize * 100);
                      $ionicLoading.show({ template: 'Uploading Picture : ' + percentage + '%' });
                  });
            }
            return deferred.promise;
        }
    }
    angular.module('App').factory('ImageUploadService', ius);
})();

And on my controller

'Use Strict';
angular.module('App').controller('editeventController', function ($scope,ImageUploadService) {


    $scope.upload = function () {
      
        ImageUploadService.uploadImage("img/test.jpg").then(  
        function (result) {

            var url = result.secure_url || '';
            var urlSmall;

            if (result && result.eager[0]) urlSmall = result.eager[0].secure_url || '';

            // Do something with the results here.

            $cordovaCamera.cleanup();

        },
        function (err) {

            // Do something with the error here
            $cordovaCamera.cleanup();

        });
      
    }

But I have this error :

rror: [$injector:unpr] Unknown provider: $translateProvider <- $translate <- ImageUploadService http://errors.angularjs.org/1.3.13/$injector/unpr?p0=%24translateProvider%20%3C-%20%24translate%20%3C-%20ImageUploadService at ionic.bundle.js:8762 at ionic.bundle.js:12696 at Object.getService [as get] (ionic.bundle.js:12843) at ionic.bundle.js:12701 at getService (ionic.bundle.js:12843) at Object.invoke (ionic.bundle.js:12875) at Object.enforcedReturnValue [as $get] (ionic.bundle.js:12737) at Object.invoke (ionic.bundle.js:12884) at ionic.bundle.js:12702 at getService (ionic.bundle.js:12843)

I don't know how to do.

Answer 1

Discovered the simple solution fiddling around on my own. Very, very simple solution directly in the controller which you can easily adapt to a service if you would like. Just add the cordova file transfer plugin and:

var server = 'https://api.cloudinary.com/v1_1/<cloudinary-name>/image/upload';

  //must be included for cloudinary unsigned upload
  var options = {
    'params': {
      'upload_preset': '<preset-name>'
    }
  };

  $cordovaFileTransfer.upload(server, $scope.imgURI, options)
  .then(function(result) {

    var response = JSON.parse(result.response);

    //this is your image source https url
    $scope.image_src = JSON.stringify(response.secure_url);

  }, function(err) {
    console.log(JSON.stringify(err));
    // Error print
  }, function (progress) {
    //progress update
  });

Done.

Answer 2

function imageUpload() { document.addEventListener("deviceready", function () {

  var options = {
    quality: 50,
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
  };

  $cordovaCamera.getPicture(options).then(function(imageURI) {
    var Profile =imageURI;
    var server = 'https://api.cloudinary.com/v1_1/<cloudinary-name>/image/upload';

    //must be included for cloudinary unsigned upload
    var options = {
      'params': {
        'upload_preset': '<preset-name>'
      }
    };

    $cordovaFileTransfer.upload(server,Profile, options)
      .then(function(result) {

        var response = JSON.parse(result.response);

        //this is your image source https url
        vm.Profile =response.secure_url;

      }, function(err) {
        console.log(JSON.stringify(err));
        // Error print
      }, function (progress) {
        //progress update
      });
  }, function(err) {
    // error
  });

}, false);

}