Ionic Take pictures cannot upload to cloudinary using unsigned upload

问题

I am trying to take picture using cordova plugin and upload to cloudinary using ionic browser. I setup the unsigned upload in cloudinary, and basically took the logic from https://calendee.com/2015/01/15/posting-images-to-cloudinary-in-ionic-apps/ to upload to cloudinary. I have written logic all in DashCtrl controller just for easiness to see everything. the code is as follow:

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope, $cordovaCamera, $cordovaGeolocation, $cordovaFileTransfer, $q, $base64, $translate) {
  //$scope.$inject = ['$cordovaCamera','$cordovaGeolocation','$cordovaFileTransfer'];
  $scope.imageURI = '';
  $scope.log=function(){
    console.log('hello~~~');
  };


  $scope.takePicture = function() {
    console.log('taking pictures ....');
        var options = {
            quality : 75,
            destinationType : Camera.DestinationType.DATA_URL,
            sourceType : Camera.PictureSourceType.CAMERA,
            allowEdit : true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 300,
            targetHeight: 300,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: false
        };

        $cordovaCamera.getPicture(options).then(function(imageData) {
            $scope.imageURI =  imageData;

            //console.log('$scope.image is ', $scope.imageURI);
            var base64EncodedString = $base64.encode(imgURI);
            var base64EncodedString = decodeURIComponent(base64EncodedString);
            var decodedString = $base64.decode(base64EncodedString);
            return uploadImage(decodedString);
        })
        .then(function(result){
          var url = result.secure_url || '';
          var urlSmall;

          if(result && result.eager[0]) {
            urlSmall = result.eager[0].secure_url || '';
            console.log('url ~~~~~~~~ is ', urlSmall);
            chat.sendMessage(roomId,'', 'default', urlSmall, function(result){
              console.log('url is ', urlSmall);
              console.log('message image url successfully updated to firebase');
            })
          }

          // Do something with the results here.

          $cordovaCamera.cleanup();
        }, function(err){
          // Do something with the error here
          $cordovaCamera.cleanup();
        });

  };

  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': MY_PRESET}
          };
          $cordovaFile
            // Your Cloudinary URL will go here
            .uploadFile(MY_UPLOAD_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;
  }


})

I am able to take a picture, but that's it. the console.log in uploadImage never appeared. Apologize for my novice ionic knowledge, but i really don't know where to trouble-shoot this. I configured to post to this cloudniary url: "http://res.cloudinary.com/MY_DOMAIN/image/upload".

Full code is in this repo: https://github.com/7seven7lst/Ionic_test/

回答1:

You are using

$cordovaFile.uploadFile(MY_UPLOAD_URL, imageURI, uploadOptions)

you need to use

 $cordovaFileTransfer.upload(server, filePath, options)

Here more info:

CordovaFileTransfer

来源：https://stackoverflow.com/questions/35238081/ionic-take-pictures-cannot-upload-to-cloudinary-using-unsigned-upload

标签

cordova

ionic-framework

cloudinary