Take a picture and upload to Parse

1

Not sure what I’m doing wrong (tried following a bunch of tutorials online as well)…I’ve also tried interchanging FILE_URL and DATA_URL but still doesn’t work. It takes a picture but doesn’t save to parse. Getting a “base64 field cannot be decoded” error

.controller('CameraCtrl', function ($scope, $state, $http, $cordovaCamera, $ionicPopover){
var cameraPopover = '<ion-popover-view style="width: 220px; height:165px; opacity: 1; left:50%; top:63%;"><ion-content><div class="list"><a class="item" ng-click="takePicture()" align="center" target="_blank"> Take Picture</a><a class="item" ng-click="selectPicture()" align="center" target="_blank"> Select From Camera Roll</a><a class="item" ng-click="closePopover()" align="center" target="_blank"> Close </a></div></ion-content></ion-popover-view>';

$scope.popover = $ionicPopover.fromTemplate(cameraPopover, {
    scope: $scope
});

$scope.$on('$ionicView.enter', function(){
    $scope.popover.show();
    $scope.popover.backdropClickToClose = false;
    console.log
});

$scope.closePopover = function() {
$scope.popover.hide();
$state.go('tab.profile');

};

var ImageObject = Parse.Object.extend("Gallery");


$scope.takePicture = function(){
    var options = {
        quality: 75,
        destinationType: Camera.DestinationType.FILE_URL,
        sourceType: Camera.PictureSourceType.CAMERA
    };
    $cordovaCamera.getPicture(options).then(
        function(imageData){ 
            $scope.photoTaken = imageData;
        },
        function(error){
            console.log(error);
        })
    $scope.popover.hide();
}

$scope.selectPicture = function(){

$scope.popover.hide();
}

$scope.submitPicture = function(){
 var imageFile = new Parse.File("mypic.jpg", { base64: $scope.photoTaken });  
    imageFile.save().then(function () {
                    
                    
                    // create object to hold caption and file reference
                    var imageObject = new ImageObject();

                    // set object properties
                    imageObject.set("title", pictureData.title);
                    imageObject.set("img", imageFile);
                    imageObject.set("user", Parse.User.current());


                    // save object to parse backend
                    imageObject.save();
                    
                }, function (error) {
                    console.log('Error');
                    console.log(error);
                });
}

})

2

I have an example here

  • https://github.com/aaronksaunders/Ionic-CameraTest6Plus

  • here is a blog post - http://www.clearlyinnovative.com/ionic-framework-camera-image-uploads-and-base64-strings

  • but look here for how to upload the image to parse - https://github.com/aaronksaunders/dcww/blob/master/www/js/services.js#L33

         var ImageObject = Parse.Object.extend("ImageInfo");


     if (_params.photo !== "") {

         console.log("_params.photo " + _params.photo);

         // create the parse file
         var imageFile = new Parse.File("mypic.jpg", {base64: _params.photo});
  //       var imageFile = new Parse.File("mypic.jpg", _params.photo);


         // save the parse file
         return imageFile.save().then(function () {

             _params.photo = null;

             // create object to hold caption and file reference
             var imageObject = new ImageObject();

             // set object properties
             imageObject.set("caption", _params.caption);
             imageObject.set("picture", imageFile);
             imageObject.set("thumbBase64", _params.thumbBase64);
             imageObject.set("location", new Parse.GeoPoint(_params.coords.latitude, _params.coords.longitude));

             // save object to parse backend
             return imageObject.save();


         }, function (error) {
             console.log("Error");
             console.log(error);
         });

     } else {
         // create object to hold caption and file reference
         var imageObject = new ImageObject();

         // set object properties
         imageObject.set("caption", _params.caption);

         // save object to parse backend
         return imageObject.save();

     }
1 Like
3

Hi Aaron,
Project is not working on Android devices. Could you please check it out?

4

i updated the project, the code and documented issues - https://github.com/aaronksaunders/Ionic-CameraTest6Plus