CODEWITHSUNDEEP
angularjscordovaionic-frameworkngcordova
Mulgard
Mulgard

Reputation: 10589

How to pick multiple images from device?

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.

Upvotes: 7

Views: 4376

Answers (2)

John
John

Reputation: 1489

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>

Upvotes: 5

ThiagoPXP
ThiagoPXP

Reputation: 5462

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.

Upvotes: 0

Related Questions