How to get all mobile phone gallery images using cordova?

Question

I want to get a full gallery of a mobile device to show them in the user grid, is this possible? Right now I am using $cordovaImagePicker , which redirects me to the gallery, and then after selecting the image I get the Uri of this image. Instead, I want all gallery images to be selected automatically.

Controller

 $scope.getImageFromGallery = function() { // Image picker will load images according to these settings var options = { maximumImagesCount: 1, // Max number of selected images, I'm using only one for this example width: 800, height: 800, quality: 80 // Higher is better }; $cordovaImagePicker.getPictures(options).then(function(results) { // Loop through acquired images for (var i = 0; i < results.length; i++) { alert(results); $scope.image = results[i]; // Print image URI } }, function(error) { console.log('Error: ' + JSON.stringify(error)); // In case of error }); } 

Answer 1

The easiest way to do this is to use the cordova-gallery-api plugin, see the following example:

  galleryAPI.getAlbums(function(items) { var html = ""; for(var i = 0; i < items.length; i++) { var album = items[i]; html += '<a href="javascript:loadAlbum(\'' + album.title + '\')" class="album"><span>' + escape(album.title) + '</span></a>'; } $content.innerHTML = html; }, function(error){alert(error);}); window.loadAlbum = function(albumName) { galleryAPI.getMedia(albumName, function(items) { var html = ""; for(var i = 0; i < items.length; i++) { var media = items[i]; html += '<a href="javascript:void()" class="media"><img src="file://' + media.thumbnail + '" /></a>'; } $content.innerHTML = html; }, function(error){alert(error);}); }; 

Answer 2

Add this plugin,

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

controller

 $scope.images = []; $scope.selectImages = function() { $cordovaImagePicker.getPictures( function(results) { for (var i = 0; i < results.length; i++) { $scope.images.push(results[i]); } if (!$scope.$$phase) { $scope.$apply(); } }, function(error) { console.log('Error: ' + error); } ); }; 

Html

 <div class="row responsive-md"> <div class="col col-25" ng-repeat="image in images"> <img ng-src="{{image.src}}" width="100%" /> </div> </div> 

Tutorial

Answer 3

check this link, maybe it is useful to you.

http://www.digitalnoiz.com/mobile-development/photo-gallery-with-phonegap-and-jquery-mobile/