How to pick multiple images from device?

Question

If i create a simple project:

ionic start MyApp

And add the ImagePicker plugin:

ionic plugin add https://github.com/wymsee/cordova-imagePicker.git -save

And simply copy this example www folder into the project and do:

ionic platform add android
ionic build android
ionic run android

Everything is working fine. I can pick multiple images as intended without getting any errors.

So far so good. Now i tried to include that into my project so i added the ImagePicker plugin. Now this is my plugin list:

ionic plugin ls
com.synconset.imagepicker 1.0.6 "ImagePicker"
cordova-plugin-camera 1.1.0 "Camera"
cordova-plugin-device 1.0.0 "Device"
cordova-plugin-dialogs 1.1.0 "Notification"
cordova-plugin-splashscreen 2.0.0 "Splashscreen"
cordova-plugin-statusbar 1.0.0 "StatusBar"
cordova-plugin-vibration 1.1.0 "Vibration"
cordova-plugin-whitelist 1.0.0 "Whitelist"

I created a new module:

angular.module('App.ImageSelect', [])

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app.imageSelect', {
        url: "/products/prints/pola/imageSelect",
        views: {
            'menuContent': {
                templateUrl: "modules/products/prints/pola/imageSelect/imageSelect.html",
                controller: 'ImageSelectController'
            }
        }
    });
})

.controller('ImageSelectController', function ($scope, $cordovaImagePicker) {
    $scope.images = [];

    $scope.selectImages = function () {
        $cordovaImagePicker.getPictures(
            function (results) {
                for (var i = 0; i < results.length; i++) {
                    console.log('Image URI: ' + results[i]);

                    $scope.images.push(results[i]);
                }

                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            },
            function (error) {
                console.log('Error: ' + error);
            }
        );
    };
});

As you can see it is EXACTLY the SAME controller which i copied from here which worked on the simple test project.

For any suspect reason this is NOT working. I always get the error:

TypeError: Cannot read property 'getPictures' of undefined

So what's the point of that? Im using EXACT the same code in both projects. In one everything is working and in the other nothing is working. I tried all the examples described here but its always the same.

Citronella

Have you given the app access to the camera in manifest? – Bield

Since version 3.0 you never need to edit that manually. it all gets generated automatically – Citronella

Did you add cordova-imagePicker plugin? If yes, remove and reinstall it again. I just checked my test app and plugin works fine on iOS, can pickup any 5 images. Checking in Android... – Verney

It did not help. Unfortunately – Citronella

Update: Yes, works in Android too. – Verney

I'm using this plugin com.synconset.imagepicker 1.0.6 "ImagePicker" – Verney

Answer 1

I checked your project and your index.html is missing cordova.js . So none of your plugins are getting loaded or initialized. Just add the below line in you index.html below where you load ng-cordova.js.

<script src="cordova.js"></script>

Apprehend

wow... it was the most obvious and i did not see it after 3 days. Thank you very much. – Citronella

Answer 2

On you example your are injecting $cordovaCamera, however the iconic uses $cordovaImagePicker. Also , in your example your using the object imagePicker from the window object. I don't the window object is what you want.

Try injecting the correct dependency $cordovaImagePicker and use the method $cordovaImagePicker.getPictures from it instead.

Nickelplate

@Mulgard: ThiagoPXP is right. Try using ngCordova and inject $cordovaImagePicker then use $cordovaImagePicker. Reference here. – Wondering