Ionic / Cordova : Upload image from phone's gallery

Question

I would like the user to be able to either take a picture or select an image from his phone's gallery.

I successfully manage to take a picture and get the imageURI .

I'm using Genymotion as emulator since i need to access to some functionalities such as camera. I know there are some other solutions. It is a little bit hard to debug while emulating but this is the only way i found to access to the camera for now. Therefor i can't see what is going on on the second part (Select an image from Gallery).

$scope.uploadPopup = function() {
    var uploadPopup = $ionicPopup.show({
        title: "Edit profile's picture",
        templateUrl: 'templates/partials/upload-img.html',
        buttons: [
            {
                text: '',
                type: 'button-energized icon-center ion-ios7-camera',
                onTap: function(e) {

                    // e.preventDefault() will stop the popup from closing when tapped.
                    e.preventDefault();
                    alert('Getting camera');
                    Camera.getPicture({
                        quality: 100,
                        saveToPhotoAlbum: false
                    }).then(function(imageURI) {
                        alert(imageURI);
                        $scope.lastPhoto = imageURI;
                    }, function(err) {
                        alert(err);
                    });

                }
            },
            {
                text: 'From gallery',
                type: 'button',
                onTap: function(e) {
                    e.preventDefault();
                    alert('Getting gallery');
                    Camera.getPicture({
                        quality: 100,
                        sourceType: Camera.PictureSourceType.PHOTOLIBRARY
                    }).then(function(imageURI) {
                        alert(imageURI);
                        $scope.lastPhoto = imageURI;
                    }, function(err) {
                        alert(err);
                    });
                }
            }
        ]
    });
};

Service :

app.factory('Camera', ['$q', function($q) {

  return {
    getPicture: function(options) {
      var q = $q.defer();

      navigator.camera.getPicture(function(result) {
        // Do any magic you need
        q.resolve(result);
      }, function(err) {
        q.reject(err);
      }, options);

      return q.promise;
    }
  }

}]);

Is it the correct way to do? Any hints or ideas?

UPDATE :

When i add :

sourceType: Camera.PictureSourceType.CAMERA

to the first function (take a picture from camera). It does not work any more. While without (using the default one probably) it does work.

Answer 1

When i added the sourceType instead of using the default sourceType(CAMERA)

sourceType: Camera.PictureSourceType.CAMERA

It was not working anymore so i guessed something was wrong here.

The correct syntax is :

navigator.camera.PictureSourceType.CAMERA

OR (with different option) :

navigator.camera.PictureSourceType.PHOTOLIBRARY

Not sure why "navigator.camera" and not "Camera", i'm guessing "Camera" is an alias of "navigator.camera".

Answer 2

I think your code is on the right track, like you said it is hard to tell without being able to test it on a device. So i can help you there. go grab the intel xdk https://software.intel.com/en-us/html5/tools . import your ionic project, then make an account. after you log in go to the test tab and push your app to a test server. Then install the intel app preview on your phone/tablet (is on android and ios). open the app, log in, and hit server apps at the bottom, you will see your app and be able to run it on your phone. You can also use the intel xdk to run an app on your phone with live debugging. Hope this helps! cheers!

Here is the code for my ngCordova plugin:

//opens up the phones camera in order to take a picture
        //requires module ngCordova and the method $cordovaCamera
        //sets Data.Image to a base 64 string
        $scope.takePhoto = function () {
            document.addEventListener("deviceready", function () {
                var options = {
                    quality: 100,
                    destinationType: Camera.DestinationType.DATA_URL,
                    sourceType: Camera.PictureSourceType.CAMERA,
                    allowEdit: false,
                    encodingType: Camera.EncodingType.PNG,
                    targetWidth: 800,
                    targetHeight: 1100,
                    popoverOptions: CameraPopoverOptions,
                    saveToPhotoAlbum: false
                };
                $cordovaCamera.getPicture(options).then(function (imageData) {

                    $scope.image = "data:image/png;base64," + imageData;
                }, function (err) {
                    // error
                });
            }, false);
        };