Opening certain files in certain folders in a HTML page

I am trying to learn a bit about web technologies therefore I am trying to create a catalogue for my files. The situation is the following:

I have a folder with N sub folders;
in each of there sub folders there is an image with always the same name (ie: image.jpg)
in each of there sub folders there is also a certain swg file with always the same name (ie: test.swg)

I would like to create an HTML file which read all the sub folders and create a preview using image.jpg, and when one clicks on the preview test.swg should be launched (not in the browser if possible)

The HTML files should contains all these preview like a catalogue.

How can I do this? should I have a local web server which runs in my machine? is it possible to do this with non web page technologies?

Thank you!

Solution

As far as i know Javascript & HTML doesn't have access to the filesystem as it's running on your browser and shouldn't be possible to go through the files iteratively because it would be some kind of breach in security.

If you ask me it's possible or not without a server, it should be possible but it is going to use other technology, for example:

Using a Command Line Interface in Linux or Windows based os you could write a shell script that iteratively will go through the files and folder path, and possibly create a JSON from it. From there the javascript could technically load that file like below.

    <script type="text/javascript" src="data.json"></script>
    <script type="text/javascript" src="javascript.js"></script>

But do note that you should periodically run the shell script periodically with something like scheduler or refresh it manually.

If you want to do it the normal way you could use many different server side language, for example NodeJs, or PHP as I think both of them require only little configuration.

You could post follow up question if you've decided on which language you want to use.

Below is some reference that you can use to start working on reading the directories

NodeJS

Node.js fs.readdir recursive directory search

Get all files recursively in directories NodejS

PHP

List all the files and folders in a Directory with PHP recursive function

How to recursively iterate through files in PHP?

After reading the directories & Files you just need to pass the data to the "rendering" part, and use some javascript to invoke the .swg when the image is clicked

But I'm not really sure about the .swg file can be invoked to the desktop app directly or not you could do some research on it

Open online file with desktop applications?