Upload image with ionic + cloudinary

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);
})();

---

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.

---

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);

}

链接地址: http://www.djcxy.com/p/77638.html

上一篇: 有角度缩小的问题

下一篇: 上传图像与离子+ cloudinary