How can I make an html file that lists files in its directory?

Question

Here is the problem I am dealing with:

There are very few windows programs that display animated .gif images at the correct frame rate. Probably because they all use the windows libraries (probably .net) to do this, and anyone who has tried viewing an animated gif in IE and found that it was playing WAY TOO SLOW knows that Microsoft failed on this spectacularly.

The web browser Chrome is one of the few programs for windows that always plays animated gif's at the correct framerate, so my solution is to create a stand-alone html document to open in Chrome, that can be dropped into a directory and opened in Chrome to thereby display all images in that directory and/or its sub-directories in a picture-viewer style.

So far, my document (gif_view.html) opens an image based on a hard-coded path/file name, zooms this image in/out with the up/down keys, and switches to other hard-coded images with the left and right keys.

What I want is for these image file names to not be hard coded. gif_view.html should use a script to find out what images and sub-directories are in the directory I placed it in, and cycle back and forth through them with the arrow keys. It should also eventually create a list of sub-directories and let the viewer browse them.

Unfortunately, I can't get it to do either of these things on its own, since (for security reasons) JavaScript has no way of looking up the contents of a directory.

Does anyone know of a way to do this? Perhaps another scripting language to handle the left/right keys? Or is there a way to programmatically read the directory with JS that I missed? Or has Microsoft FINALLY released a patch or something to fix the frame-rate problem?

Please keep in mind: this should be a STAND ALONE DOCUMENT with NO external dependencies. A user should just be able to drop in into a folder, open it with a browser, and watch the magic happen. If your solution involves anything outside of the document itself (like say installing Apache and some server-side script to do the file reading) then it is not a solution. I've already tried stuff like that myself. Such external solutions work, but they are each very clumsy for their own reasons.

If anyone has ideas, I'd be grateful.

Answer 1

Using Chrome's directory upload feature, this is a breeze. Firstly, put a file select field in your file's HTML code:

<input type="file" id="file_input" webkitdirectory="" directory="">

and then, when the user selects a folder using it, you can read stuff like this:

document.getElementById('file_input').addEventListener('change',function(e){
    var gifs=e.target.files;
    [].forEach.call(gifs,function(curGif){
        var elt=document.createElement('img');
        elt.setAttribute('src',(webkitURL||URL).createObjectURL(curGif));
        document.body.appendChild(elt);
    });
},false);

this doesn't have all the fancy stuff with the arrows, but it works: http://jsfiddle.net/markasoftware/m65u7/1/