Is there any way I can use static HTML (and/or JavaScript) in the browser to get all the files and folders of the current project? For example, I have the following structure:

./project
├── files-and-folders
│   ├── 1.png
│   ├── 2.png
│   ├── 3.png
│   └── inner-folder
│       ├── 4.png
│       └── 5.png
├── index.html
└── index.js

I would like to open index.html in a browser, i.e. file:///path/to/project/index.html and get the list of all files and folders under the files-and-folders folder.

I know you can use fs with NodeJS and read files and folders, but I was wondering if this can be achieved using static HTML or JavaScript.

The ideea is, that I would like to get all the files and folders from the files-and-folders folder, and display them inside my index.html file as a list.

Thank you.

CodePudding user response：

TL;DR This should not be possible

Reasons:

1. It it a security feature of JavaScript that it is not allowed to access client-side files (despite uploads via input elements), thus you cannot use a pure JavaScript solution to achieve what you want.
2. If you were looking for a server-side solution, pure JavaScript also wouldn't be an option as JavaScript is always executed on the client (no regarding NodeJS etc.) and therefore doesn't know anything about the server-side files.

Your options:

There might not be any easy way to achieve your goal. If you just want to show the index.html (or whatever) locally, which is how I understood your question, you could think about using the (non-JavaScript-;)) scripting language of your preference like Perl or Python. Your script could then look like this:

1. Dynamically generate your index.html as needed.
2. Open your browser shower this file.

Then you would have to make sure that your script is called to show the HTML file and the file is not opened directly as it might be outdated otherwise.

Update: Why does using an URL like file://path/to/project in your browser work then?

The browser is an application running on your local PC. Thus, it has the possibilities and permissions to access your local file system. This is done using the means the browser's programming language (like e. g. Rust) offers in conjunction with your operating system and hence not limited to what JavaScript offers.

You could open the file-URL you posted your browser and look at the source code of the page displayed. You'll find that the directory content names are inserted by some "magic" you don't see. In Firefox, you'll see lines like addRow("Documents and Settings" ... for example, if you open just file:///C:/ (on Windows). The Documents and Settings is originating from your browser querying your operating system for the contents of C:\ and creating an addRow entry for everything found. This is a little similar to what I wrote in "Your options".

CodePudding user response：

You can use an input field with type file, this requires user permission and as far as I know it is the only way of accessing directories and files from the client side.

<input type ="file" webkitdirectory="">