Get pictures from a given directory using JavaScript

Question

I am using JavaScript to develop a Windows 8 application. I need to get all the pictures (path of each and every picture) present in a given directory. How would I do this?

I have the following:

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/scenario3.html", {
        ready: function (element, options) {
            document.getElementById("folder").addEventListener("click", pickFolder, false);
        }
    });

    function pickFolder() {
        // Clean scenario output
        WinJS.log && WinJS.log("", "sample", "status");

        // Verify that we are currently not snapped, or that we can 
        // unsnap to open the picker
        var currentState = Windows.UI.ViewManagement.ApplicationView.value;
        if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped && !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
            // Fail silently if we can't unsnap
            return;
        }

        // Create the picker object and set options
        var folderPicker = new Windows.Storage.Pickers.FolderPicker;
        folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop;
        // Users expect to have a filtered view of their folders depending on the scenario.
        // For example, when choosing a documents folder, restrict the filetypes to documents for your application.
        folderPicker.fileTypeFilter.replaceAll(["*"]);
        //folderPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);

        folderPicker.pickSingleFolderAsync().then(function (folder) {
            if (folder) {
                // Application now has read/write access to all contents in the picked folder (including sub-folder contents)
                // Cache folder so the contents can be accessed at a later time
                Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.addOrReplace("PickedFolderToken", folder);

                var pictures = Windows.Storage.KnownFolders.folder;
                pictures.getFilesAsync().done(function (images) {
                    console.log(images.length + " images found.");
                    WinJS.log && WinJS.log("Total Images: " + images.length, "sample", "status");
                });


            } else {
                // The picker was dismissed with no selected file
                WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
            }

        });
    }
})();

If I use the Above code it gives following error:

Unable to get property 'getFilesAsync' of undefined or null reference

Answer 1

If you need to load pictures from the Pictures Library, you first need to check that this capability is enabled within the Capabilities tab inside the package.appxmanifest file of your project.

Once enabled, you can refer to this library with the following:

// 'pictures' is a reference to our Pictures Library
var pictures = Windows.Storage.KnownFolders.picturesLibrary;

Microsoft made the decision that any operation taking more than 50 milliseconds would need to be asynhronous, therefore to get the images from this library we must the following async method, and handle the results when the promise is resolved:

// Get a list of files ('images') within our Pictures Library
pictures.getFilesAsync().done(function( images ) {
    console.log( images.length + " images found." );
});

From here you could iterate over the images found and handle them as you like.

For more information, check out the Window.Storage namespace.

Additionally, you may find the File access sample to be helpful as well.

Update

From your updated code I can see that you're permitting the user to select a folder of their choosing. With this you'd need to set the fileTypeFiltering and then pull the images once the pickSingleFolderAsync promise resolves:

// Prompt user to select a folder
var picker = Windows.Storage.Pickers.FolderPicker();

// Which file types will we be showing?
picker.fileTypeFilter.append(".jpg");

// Grab the selected folder, reference as 'folder'
picker.pickSingleFolderAsync().then(function (folder) {
    // Get files within selected folder as 'files'
    folder.getFilesAsync().then(function (files) {
        // Output number of files found
        console.log(files.length + " files found.");
    });
});