Check for Valid Image using getFilesAsync()

Question

Using WinJS, while looping through a directory, how to retrieve only images in that particular directory and ignoring any other file extension, including the DoubleDots .. and the SingleDot . etc?

Something like:

var dir = Windows.Storage.KnownFolders.picturesLibrary;

dir.getFilesAsync().done(function (filesFound) {

for(var i=0; i < filesFound.length; i++){}

       if(filesFound[i] IS_REALLY_AN_IMAGE_(jpeg,jpg,png,gif Only)){

       //Retrieve it now!

}else{
     //Escape it.
} 
}})

Answer 1

Instead of trying to process pathnames, it will work much better to use a file query, which lets the file system do the search/filtering for you. A query also allows you to listen for the query's contentschanged event if you want to dynamically track the folder contents rather than explicitly enumerating again.

A query is created via StorageFolder.createFileQuery, createFolderQuery, or other variants. In your particular case, where you want to filter by file types, you can use createFileQueryWithOptions. This function takes a QueryOptions object which you can initialize with an array of file types. For example:

var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;

var options = new Windows.Storage.Search.QueryOptions(
    Windows.Storage.Search.CommonFileQuery.orderByName, [".jpg", ".jpeg", ".png", ".gif"]);

//Could also use orderByDate instead of orderByName

if (picturesLibrary.areQueryOptionsSupported(options)) {
    var query = picturesLibrary.createFileQueryWithOptions(options);
    showResults(query.getFilesAsync());
}

where showResults is some function that takes the promise from query.getFilesAsync and iterates as needed.

I go into this subject at length in Chapter 11 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, in the section "Folders and Folder Queries". Also refer to the Programmatic file search sample, as I do in the book.

When you want to display the image files, be sure to use thumbnails instead of loading the whole image (images are typically much larger than a display). That is, for each StorageFile, call its getThumbnailAsync or getScaledImageAsThumbnailAsync method. Pass the resulting thumbnail (blob) to URL.createObjectURL which returns a URL you can assign to an img.src attribute. Or you can use a WinJS.UI.ListView control, but that's another topic altogether (see Chapter 7 of my book).