[SOLVED] detect the files in the current directory using client side Javascript

Question

Can we detect the files in the current directory using client side Javascript.
EXAMPLE:
-index.html
-script.js

These are two files in a certain directory. If I add new files on that directory, the file names should be displayed on the html pages without editing it.

IMPLEMENTATION:
Whenever I add new .html file on my github page, it should Automatically list that page in my home page and I should be able to open that link.
Is this possible??😁

Answer 1

with Calviղ's answer, its possible
github also has an API that let see the files within the project.

i made this quick and dirty example using fetch
https://code.sololearn.com/Wf1rN7w25Hq7/?ref=app

Answer 2

JavaScript does not have access to files and other local stuff.
JavaScript is limited to browser access.

You can do this on your own server if you're using nodejs but not with pure Javascript.

Answer 3

Rei Nice... I didn't even think about the Github API. That pretty much fits the scenario I described in my 3rd paragraph. 👌

Answer 4

Bibek Oli Simply stated... it's not possible using only static html files on Github.

The browser doesn't have direct access to the local file system, much less a remote file system where the new HTML files would be dropped.

What you're asking for would require a web service script that dynamically builds the list of pages based on the files in a given directory on that server and injects that list into the HTTP response stream going back to the browser.

As new files are dropped, they could then be visible in the browser when the page is refreshed or just revisited.

To make this happen more real-time to immediately appear as the files are dropped, you have two different options.

1. Javascript polling in the browser making periodic AJAX calls to the web server requesting for a new page list if different from the one currently loaded.

2. The other option involves using web sockets to allow for the web server to send the updated list when it happens via a push notification to all connected browsers.

Answer 5

It is always possible if you have API to work with...

But without an API, JavaScript is disabled in case of accessing files on local machine.

Answer 6

Using XMLHttpRequest(), you could check for a file exist in the directory or not. But it can't check for any unknown file name beforehand.

Answer 7

Rei thank you sooooo much.
You did it in such a easier way I had not thought of. Thank you soo much for your help.
And thank you Calviղ , David Carroll and RDC 😍for giving time to answer my question.
Thank you all of you🙏

Answer 8

Calviղ I just want to check for .html files.
Eg: write that code in index.html.
And if I add a new file named index2.html and many others, the new files should be listed in index.html.
You understand what I'm saying.🙂