Accessing Image Gallery using Ionic and ngCordova

How to access your smartphone image gallery. Attached to this article will be a working example you can reuse for your needs.

Download ngCordova archive

ngCordova is a collection of 63+ AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova mobile apps with AngularJS. While we can make this work without ngCordova, it’s much more practical this way. This collection also holds many Ionic Framework compatible plugins.

Download ngCordova zip file, here’s site link:


Unzip this archive, find a file name called: ng-cordova.min.js, it should be available at this location: ng-cordova-master\dist\.

Open your newly created project directory and copy ng-cordova.min.js to this location: IonicImagePickerDemo\www\js.

Now include this location to index.html located at IonicImagePickerDemo\www; add it above cordova.js file, like this:

<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

Install Cordova Image Picker Plugin

Add required plugins:

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

Install Whitelist plugin only if you’re using Cordova 4.0 +. Without it you’ll receive “Application Error: There was a network error.” error. On the other hand, add last two plugins only if you’re intending to reuse my example. They’re not required for Image Picker.

Github – Image Picker


At this point, you should have everything set up and ready, we can start working on our example.

Go to IonicImagePickerDemo project directory and find app.js, alter angular.module line and include ngCordova service, like this:

angular.module('starter', ['ionic', 'ngCordova'])

Open index.html file, add a controller to ion-pane directive:

    <ion-header-bar class="bar-stable">
      <h1 class="title">Image Picker Example</h1>
    <ion-content ng-controller="ImagePickerController">

Initialize this controller in app.js file; don’t forget to inject $cordovaImagePicker service. We will also need $ionicPlatform, like this:

app.controller('ImagePickerController', function($scope, $cordovaImagePicker, $ionicPlatform) {

If you’re using Cordova 4+ you will need to check if there’s a Whitelist plugin installed with your project. If you have it, add this security meta tag to your index.html HEAD content:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

Without it your application will throw an error during the app initialization, after that it will constantly throwing no security meta-tag found. While not a blocking point, constant console log warnings will make it hard to do any debugging.



Get a list of pictures, with options to limit number, quality, and size of images.

Param Type
options Object
Options Type Detail
maximumImagesCount Integer Max images to be selected
width Integer Width to resize image to (if one of height/width is 0, will resize to fit the other while keeping aspect ratio, if both height and width are 0, the full size image will be returned)
height Integer Height to resize image to
quality Integer Quality of resized image, defaults to 100

We will use next function to trigger a notification, don’t forget to wrap it into Cordova deviceready event (or Ionic ready event depending on your project):

$scope.selectImage = function(){        
        var options = {
           maximumImagesCount: 1,
           width: 800,
           height: 800,
           quality: 80
            .then(function (results) {
              for (var i = 0; i < results.length; i++) {
                        console.log('Image URI: ' + results[i]);   // Print image URI
                        scope.picData = results[i];//SOME IOS VERSION NOT SUPPORT resolveLocalFileSystemURL
                        $window.resolveLocalFileSystemURL(results[i], function(fileEntry) {                                
    				scope.picData = fileEntry.nativeURL;
            }, function(error) {
               // error getting photos
               console.log('Error: ' + JSON.stringify(error));


Application main page.

<!DOCTYPE html>
        <meta charset="utf-8"/>
        <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *"/>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet"/>
        <link href="css/style.css" rel="stylesheet"/>
        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <!-- cordova script (this will be a 404 during development) -->
        <script src="js/ng-cordova.min.js"></script>    
        <script src="cordova.js"></script>
        <!-- your app's js -->
        <script src="js/app.js"></script>
    <body ng-app="starter">
            <ion-header-bar class="bar-stable">
                <h1 class="title">Image Picker</h1>
            <ion-content ng-controller="ImagePickerController">
                <button class="button button-full button-positive" ng-click="selectImage()">
                    Select Image
                <img ng-src="{{picData}}" style="width:100%; height: auto;"/>


image picker - ngCordova


Prakash S

Prakash S

I would like to introduce myself as a Software professional opting for the career in software industry. I'm Prakash S, a MCA graduate and trained as industry level practice for Software technology. Basically I am a PHP Developer but now days exploring more in HTML5, CSS, AngularJS and jQuery libraries.