$cordovaImagePicker.getPictures undefined

Question

I am building my first app using Visual Studio Tools for Apache Cordova (TACO) and running into a problem attempting to use my first Cordova plugin $cordovaImagePicker. I am using Visual Studio 2015 update 2 with version 12.0.60401.1 of the VS Taco extension.

config.xml is set to use version 6.0.0 of the Cordova CLI and I installed version 1.1.0 of the plugin https://github.com/wymsee/cordova-imagePicker.git. My index.html below is pulling in version 1.4.7 of angularjs, 1.1.0 of ionic.js and 0.1.23-alpha of ng-cordova.js.

<!DOCTYPE html>
<html data-ng-app="app">
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div data-ng-view></div>

    <!-- External Libraries -->
    <script src="lib/angular.js"></script>
    <script src="lib/angular-route.js"></script>
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ng-cordova.js"></script>

    <!-- App -->
    <script src="scripts/app.module.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/home.js"></script>
    <script src="scripts/dashboard.js"></script>

    <!-- Widgets -->
    <script src="scripts/widgets/widgets.module.js"></script>
    <script src="scripts/widgets/zlTypePlaceholder.js"></script>

    <!-- Cordova reference, this is added to your app when it's built. -->
    <!-- ReSharper disable once Html.PathError -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
</body>
</html>

I am using the @johnpapa Angular 1 style guide

app.js

(function () {
    "use strict";

    document.addEventListener('deviceready', onDeviceReady.bind(this), false);

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener('pause', onPause.bind(this), false);
        document.addEventListener('resume', onResume.bind(this), false);        
    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
})();

app.module.js

(function () {
"use strict";

angular.module('app', [
        'ionic',
        'ngCordova',
        'ngRoute',
        'app.widgets'
    ]);
}

Below in my dashboard.js when I debug this code with visual studio to my android Nexus 5X (Cordova 5.1.0) I get an error when a button is clicked bound to sendImage(). Cannot read property 'getPictures' of undefined but $cordovaImagePicker is an object showing that method when I log it to console it just fails when it hits $cordovaImagePicker.getPictures(options)

(function () {
    "use strict";

    angular
        .module('app')
        .controller('Dashboard', Dashboard);

    Dashboard.$inject = ['$scope', '$routeParams', '$cordovaImagePicker', '$ionicPlatform'];

    function Dashboard($scope, $routeParams, $cordovaImagePicker, $ionicPlatform) {
        var vm = this;
        vm.sendImage = sendImage;        

        function sendImage() {
            console.log("sendMessage Clicked");

            //Import Image
            $ionicPlatform.ready(function() {
                console.log($cordovaImagePicker);

                //TODO: Get Image Picker to work
                var options = {
                    maximumImagesCount: 1,
                    width: 150,
                    height: 150,
                    quality: 100
                };
                console.log(options);

                console.log('here we go...');
                $cordovaImagePicker.getPictures(options)
                    .then(function(results) {
                        console.log('it worked!');
                        for (var i = 0; i < results.length; i++) {
                            console.log(results[i]);
                        }
                    }, function(error) {
                        console.log(error);
                    });
            });
        }
    }
})();

I would really like to use cordova but if I cant get past this first hurdle I may go the Xamarin route. I don't want to give up easy but please let me know if anything sticks out to you. Thanks!

I m not very familiar with Visual Studio TACO. But by the first look at code, i feel the plugin related code should be invoked only after deviceready event is fired which ensures that the cordova APIs have loaded completely. — Gandhi, May 04 '16 at 14:29
this plugin only works when you use **ionic run android**. **ionic serve** or **-- livereload** are not supported. — Atula, May 05 '16 at 10:38
@Gandhi Would wrapping the call in $ionicPlatform.ready do the trick like I did in dashboard.js when button is clicked? — Sean Merron, May 05 '16 at 12:21
@Atula Where do you see ioninc server or livereload being used? — Sean Merron, May 05 '16 at 12:21
@SeanMerron i hope wrapping the plugin invocation in $ionicPlatform.ready function should work. — Gandhi, May 05 '16 at 12:24
@Gandhi I already do this as shown above in dashboard.js. Am I doing it the wrong way? — Sean Merron, May 06 '16 at 16:02
@Sean I m not familiar with ionic framework. But as far as I know platform ready is the equivalent of deviceready event.But in your case you are using both of them. Should Cordova.is inclusion order matter is what I m thinking? — Gandhi, May 06 '16 at 21:39
@Gandhi - How can I add something to device ready event if it doesn't occur until a button is clicked? — Sean Merron, May 11 '16 at 11:12

$cordovaImagePicker.getPictures undefined

0 Answers0