How to fetch all gallery image of mobile using cordova?

Question

I want to fetch the complete gallery of a mobile device to show them in a custom grid, is it possible? Right now I am using $cordovaImagePicker which is redirecting me to the gallery and then after selecting the image I am getting the Uri of that image. Instead of that I want the complete gallery images uri auto selected.

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 cordova-gallery-api plugin, refer to 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);});
};