Skip to content

Instantly share code, notes, and snippets.

@calendee
Last active May 4, 2021 22:03
Show Gist options
  • Save calendee/20e344a8152ff76cbe6f to your computer and use it in GitHub Desktop.
Save calendee/20e344a8152ff76cbe6f to your computer and use it in GitHub Desktop.
Cloudinary / Ionic Image Upload Service
```
(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);
})();
```
@longsangstan
Copy link

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.

@peanpanther
Copy link

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

@Saporules
Copy link

thanks #longsangstan works great!

@attilavago
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment