2

I'm building a hybrid app in ionic, which runs over cordova. I use the $cordovaCamera plugin to capture images from the phone, either by selecting from the phone's gallery or by using the camera to take a picture.

I then send that image using Restangular to my server, and when that action finishes, I want to display a status message on the screen.

My problem: All of the above works perfectly on Android. On iOS, it is working only when the image is selected from the gallery, but not when the image is directly captured from the phone. In that case, the image is correctly transferred to the server, the request returns a 201 Created just as it should - but the then() callback function is never entered.

If anyone can explain this behavior, that would be awesome...my second best would be to capture the image on the iPhone, save to gallery, and then attempt to retrieve the last saved image, but I haven't been able to figure out how to yet and I'd rather just get this working.

Update: I've narrowed it down to the Restangular part - if instead of calling the Restangular upload function, I use $http, the callback is triggered as expected and all is good...so that's what I'm going to do, but if anyone can tell me what the problem was I'd be grateful.

Relevant code:

/** cameraService functions **/

//when the user chooses to snap a picture from the camera 
takePicture: function(){
            var options = {
                quality: 50,
                destinationType: Camera.DestinationType.DATA_URL,
                sourceType: Camera.PictureSourceType.CAMERA,
                encodingType: Camera.EncodingType.JPEG,
                popoverOptions: CameraPopoverOptions
            };

            return $cordovaCamera.getPicture(options).then(
                function(imageData) {
                    return imageData;
            },
                function(err) {
                    console.log("error", err);
            });
        },

        //when the user chooses to select image from the gallery
        choosePicture: function(){
            var options = {
                destinationType: Camera.DestinationType.DATA_URL,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY
            };

            return $cordovaCamera.getPicture(options).then(
                function(imageData) {
                    return imageData;
                },
                function(err) {
                    console.log("error", err);
                });
        },
        uploadPicture: function(imageSource, caption, is_logo){
            if (typeof is_logo == 'undefined') is_logo = false;
            var upload_object = {
                caption: caption,
                source: imageSource,
                is_logo: is_logo
            };
//apiService is my wrapper for Restangular
            return apiService.uploadFile(loadingService.getClientUrl('images'), upload_object);

        },


/**apiService uploadFile - apparently the problem is here ***/
uploadFile: function(baseElem, object, route, path){
    var headers = apiFunctions.setHeaders({'Content-Type': undefined});

//this DOES NOT WORK (on iPhone with image from camera) - request completes but callback not triggered 
    return Restangular.all(baseElem).customPOST(object, path, route, headers);
//this works fine:
return $http.post('https://api.mysite.dev/v1/clients/'+localStorageService.getValue('client_id')+'/images', JSON.stringify(object), {headers:headers}
                );

            },


/** controller functions **/

        $scope.takePicture = function () {
            cameraService.takePicture().then(function (imageData) {
                $scope.data.imageSource = imageData;
            });
        };
        $scope.choosePicture = function () {
            cameraService.choosePicture().then(function (imageData) {
                $scope.data.imageSource = imageData;
            });
        };
        $scope.uploadPicture = function () {
            cameraService.uploadPicture($scope.data.imageSource, $scope.data.caption)
                .then(function (response) { //this is never entered if image is captured from camera on iPhone 
                    $ionicScrollDelegate.scrollTop();
                    $scope.data.caption = '';
                    $scope.data.imageSource = '';
                    if (response.data.response.is_success.data_value == true) {
                        $scope.messages.success.push("Photo uploaded successfully");
                    } else {
                        $scope.messages.failure.push("Error uploading photo.");
                    }
                });
        }
BIU
  • 2,340
  • 3
  • 17
  • 23
  • Perhaps you should put a ".catch" block behind your ".then" block to handle upcoming erros – Beat Nov 18 '15 at 17:20

0 Answers0