Cloudinary / Ionic Image Upload Service

imageUploadService.js

```
(function() {

  /**
   * @ngInject
   */
  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}
        };

        $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('yourAppName').factory('ImageUploadService', ius);

})();
```

10 / 10 comment LearningTools.

would the "CLOUDINARY_CONFIGS.API_URL" now be the https url or the general url in this case?
"http://res.cloudinary.com/DOMAIN_NAME/image/upload" ?

HI,

I try to integrate cloudinary in ionic apps. I adding this ImageUploadService service in my code. And I use this function : https://gist.github.com/calendee/40a0afa20deaad5bb058#file-callingimageuploadservice-js to upload image. But I have this error message : Error: [$injector:unpr] Unknown provider: $translateProvider <- $translate <- ImageUploadService .

Can you help me?

thanks

Good work!
I have to made some changes in order to make it work though. Below is my code:

.factory('ImageUploadFactory', function ($q, $ionicLoading, $cordovaFileTransfer, CloudinaryConfigs) {
  return {          
      uploadImage: function (imageURI) {
            console.log('start upload image.');
            var deferred = $q.defer();

            uploadFile();

            function uploadFile() {
              $ionicLoading.show({template : 'Uploading image...'});
              // Add the Cloudinary "upload preset" name to the headers
              var uploadOptions = {
                params : { 'upload_preset': CloudinaryConfigs.upload_preset}
              };
              $cordovaFileTransfer
                // Your Cloudinary URL will go here
                .upload(CloudinaryConfigs.api_url, imageURI, uploadOptions)

                .then(function(result) {
                  // Let the user know the upload is completed
                  $ionicLoading.show({template : 'Done.', duration: 1000});
                  var response = JSON.parse(decodeURIComponent(result.response));
                  deferred.resolve(response);
                }, function(err) {
                  // Uh oh!
                  $ionicLoading.show({template : 'Failed.', duration: 3000});
                  deferred.reject(err);
                }, function (progress) {

                });
            }
            return deferred.promise;
      },
  }
});

Hope it helps.

Hiii longsangstan , i used your codes in my app..but why im keep receiving failed status..please help me

thanks #longsangstan works great!

In your article here: https://calendee.com/2015/01/15/posting-images-to-cloudinary-in-ionic-apps/ you may want to change the plugin installation commands to:

cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer

The old plugin repos have been removed.