Generating html-page with links basing on files available in directory tree

Question

I'd like to generate local html-page contents using information gathered by browsing directory-tree depending on file names of files. I've got no experience in javascript which I suppose it would be the easiest to accomplish the task with. The page must work with IE7 correctly. Now, let me give an example of what I'd like to do.

The html-file is located in a local directory, say HTML_DIR. There are several subdirectories, say HTML_DIR\A, HTML_DIR\B, HTML_DIR\C containing xml files called XXX_001-999.xml, YYY_001-999.xml, ZZZ_001-999.xml, whereas each of the types can be found in each subdirectory. So, an exemplary scenario would be:

HTML_DIR
/A
  - XXX_001.xml
  - XXX_002.xml
  - XXX_003.xml
  - YYY_001.xml
  - YYY_002.xml
  - YYY_003.xml
/B
  - ZZZ_001.xml
  - ZZZ_002.xml
  - ZZZ_003.xml
  - ZZZ_111.xml
  - XXX_111.xml
/C
  - YYY_001.xml
  - YYY_002.xml
  - YYY_003.xml
  - ZZZ_111.xml
  - XXX_111.xml

Now, I'd like to generate tables on the html-page for each of the subdirectories dynamically, with rows depending on containing files, so the page would look like:

Table A
XXX    YYY    ZZZ    Link
001    001           http://localhost:8080/001.html
002    002           http://localhost:8080/002.html
003    003           http://localhost:8080/003.html

Table B
XXX    YYY    ZZZ    Link
              001    http://localhost:8080/001.html
              002    http://localhost:8080/002.html
              003    http://localhost:8080/003.html
111           111    http://localhost:8080/111.html

Table C
XXX    YYY    ZZZ    Link
       001           http://localhost:8080/001.html
       002           http://localhost:8080/002.html
       003           http://localhost:8080/003.html
111           111    http://localhost:8080/111.html

Is it doable?

just ie7, or real browsers also? – dandavis Jul 02 '13 at 15:53 — dandavis, Jul 02 '13 at 15:53

score 1 · Answer 1 · answered Jul 02 '13 at 15:56

1

It's impossible read the file system of the server with javascript, which is executed on the client. You must use your server-side language (like php or java) to do this.

answered Jul 02 '13 at 15:56

nap.gab

451
4
19

yep, but this isn't a cross-browser solution. the best way is do it server side :) – nap.gab Jul 02 '13 at 16:04
1

It is best not to recommend stuff that is deprecated and no longer supported (as is the case with ActiveX). – Burhan Khalid Jul 02 '13 at 16:15
1

@BurhanKhalid OP talks only about IE7, ActiveX is not deprecated in it. ActiveX and FileSystemObject is probably the only way to do this with JavaScript, or rather JScript. Also it looks like this will never come out of a local machine... – Teemu Jul 02 '13 at 16:30
@nap.gab - no, it's not cross-browser. But, neither is the requirement. I merely commented on the use of the word "impossible" and provided a proof that refuted the assertion. Besides, many tasks do not require a server (or the users aren't proficient enough/permitted to use them. I've done jobs just like this) – enhzflep Jul 02 '13 at 16:42
@enhzflep - yeah, but he say that it must work on ie7, not ONLY on ie7. – nap.gab Jul 03 '13 at 12:28
Yep. It doesn't work on only IE7 either. It works on IE6, 7, 8, 9, 10 etc. Point understood, though not agreed with. As I said, it's not always possible to install a server. Java and PHP are not even available out of the box on a machine that comes with IE7. It's a sh1tty question without any comfortable answers, I reckon. – enhzflep Jul 03 '13 at 12:50

Teemu · Answer 2 · 2013-07-03T07:46:48.647

Here's a simple snippet for reading all files and folders in a given folder, but I'm not sure if you can read virtual folders with it.

window.onload = function () {
    var topRoot = 'YOUR_TOP_FOLDER_PATH', // Like 'C:/xmls'   
        fso = new ActiveXObject('Scripting.FileSystemObject'),
        getFolderTree = function (path) {
            var allfiles = [],
                getTree = function (subfolders) {
                    var subs, files;
                    while (!subfolders.atEnd()) {
                        subs = subfolders.item().SubFolders;
                        if (subs) {
                            getTree(new Enumerator(subs));
                        }
                        files = new Enumerator(subfolders.item().files);
                        while (!files.atEnd()) {
                            // Add a file filter here
                            allfiles.push(new String(files.item()));
                            files.moveNext();
                        }
                        subfolders.moveNext();
                    }
                };
            getTree(new Enumerator(fso.GetFolder(path).SubFolders));
            return allfiles;
        },
        tree = getFolderTree(topRoot),
        dir = document.getElementById('dir'),
        n = 0;
    tree.sort();
    // This is just an example print
    for (; n < tree.length; n++) {
        dir.innerHTML += tree[n] + '<br>';
    }
    return;
}

Just fit this function into your own architechture, and add topRoot, file filters and printing layout.

Notice, that topRoot should rather be a subfolder (i.e. don't use topRoot = 'C:';), reading all the files in the system would take a lot of time.

Generating html-page with links basing on files available in directory tree

2 Answers2