Phonegap/Cordova read images from gallery folder [Tip]

Hello, recently I was working on a project where I wanted to get all the images from the camera but because I wanted to load them in batches I had to find their filenames and store them in a local array for future use.
Since the new cordova file plugin did some changes, there is little information on how to get directories and files.

So here is how it is done on Android (because Apple doesn’t allow access to public folders).

Note: This is for cordova plugin version >= 1.2.0 (right now its something like 1.4.0). Make sure to add it on your plugins ->


cordova plugin add cordova-plugin-file

First of all we have to make sure that we run the code after the deviceready event so:



var app = window.app || {};
app.mediaFiles = [];
app.initialize = function () {
    app.bindEvents();
};
app.bindEvents = function () {
    document.addEventListener('deviceready', app.onDeviceReady, false);
};
app.onDeviceReady = function () {
   window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, onFileSystemSuccess, fail);
};

So far we have determined that the device is ready and we have added one event listener for the external root directory which is actually the internal memory (not the SDCard).

Now lets add the event handler functions


function onFileSystemSuccess(fileSystem) {
    window.console.log(cordova.file.externalRootDirectory);
    var directoryReader = fileSystem.createReader();
    directoryReader.readEntries(function (entries) {
        var i;
        for (i = 0; i < entries.length; i++) {
            if (entries[i].name === "DCIM") {
                var dcimReader = entries[i].createReader();
                dcimReader.readEntries(onGetDCIM, fail);
                break; // remove this to traverse through all the folders and files
            }
        }
    }, function () {
        window.console.log("fail");
    });
}

function onGetDCIM(entries) {
    var i;
    for (i = 0; i < entries.length; i++) {
        if (entries[i].name === "100MEDIA") {
            var mediaReader = entries[i].createReader();
            mediaReader.readEntries(onGetFileNames, fail);
            break; // remove this to traverse through all the folders and files
        }
        //This will log all files and directories inside 100MEDIA
        window.console.log(" >>>>>>> " + entries[i].name);
    }
}

function onGetFileNames(entries) {
    var i;
    for (i = 0; i < entries.length; i++) {
        if (/\.(jpe?g|png|gif|bmp)$/i.test(entries[i].name)) {
            app.mediaFiles.push(entries[i]);
        }
        //This will log all image files found
        window.console.log(" $$$$$ " + entries[i].name);
    }
}

Now all image files inside internal-storage/DCIM/100MEDIA are stored inside app.mediaFiles variable and can be referenced from there using the full path for example


window.console.log(app.mediaFiles[0].toURL());

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

One thought on “Phonegap/Cordova read images from gallery folder [Tip]

Leave a Reply

Your email address will not be published. Required fields are marked *