List Files on a server via front-end javascript

Question

A have a folder filled with files accessible to the end user, and am working on a javascript file to parse through them and deliver them as needed. However, rather than manually updating the list, I'd like the javascript to scan the folder and then list iterate through an array of the files in that folder. Is there a decent way in front-end JS to do this? All solutions I've looked into have turned out to be purely for Node.

For example, say I have a folder structure like so...

/ (Web Root)
|__ /Build_a_card
|__ /Cool pictures
  |__ /Summer Pictures
       summer_dog.gif
       smiling_sun.svg
  |__ /Winter Pictures
       snowman.png
  cat.jpg

And then in the javascript I'd run something like

var image_list = get_list("/Cool Pictures");
build_select_list(image_list);

function get_list(folder_to_look_in){
   var the_list = ???
   return the_list;
}
...

And then, for example, the JS is run, and after some parsing, the user would see...

<select>
  <option value="summer_pictures/summer_dog.gif">summer_dog.gif</option>
  <option value="summer_pictures/smiling_sun.svg">smiling_sun.svg</option>
  <option value="winter_pictures/snowman.png">snowman.png</option>
  <option value="cat.jpg">cat.jpg</option>
</select>

In an ridiculous world, since the individual files in the folder are accessible to javascript, hypothetically I could brute-force every single possible file name in the folder and return success on each one:

function get_list(folder){
  var list_of_files = {};
  var starting_character = 0;
     list_of_files = every_single_option({starting_character}, 0, 40, folder)
  }
}
function every_single_option(existing_characters, current_depth, max_depth, folder){
  this_string = String.fromCharCode(existing_characters);
  if (request_url(this_string, folder)){
     there_array[this_string] = this_string;
  }
  var there_array = {}
  var i;
  if (current_depth < max_depth){
    while (i < 127){
        let temp_array = there_array;
        temp_array[i] = i;
        mix_source(there_array, every_single_option(existing_characters, current_depth + 1, max_depth, folder))
    }
}
return there_array;
}
function request_url(url, folder){
  var oReq = new XMLHttpRequest();
  oReq.addEventListener("load", reqListener);
  oReq.open("GET", "/" + folder + "/" + url);
  oReq.send();
}
function mix(source, target) {
   for(var key in source) {
     if (source.hasOwnProperty(key)) {
        target[key] = source[key];
     }
   }
}

but as mentioned, doing it that way would be ridiculous (both unusably slow and very bad code design, resorting to brute-forcing your own website is just dumb.)

but it does hypothetically prove that there's no reason javascript shouldn't be able to just get a directory listing assuming public permissions. Alternatively, I could make some API with the backend that allows fetching a JSON that lists it, but that's requiring backend code for something that's a frontend process. I'm trying to pull this off with something sane and simple, but the question is... how?

(If you insist on posting a jquery way to do this, please also post a non-jquery way as well as there is no jquery available in my environment.)

Answer 1

So, refusing to admit it's impossible, I engineered a solution that works, and requires no API. That said, the server has to not be actively blocking the javascript from viewing the directory. In other words, the server hasn't turned indexing off, and the directory doesn't have an index.html or equivalent to rewrite any attempt to index, and the server isn't doing some url-rewriting. In other words, this should work in any server environment that doesn't rewrite or block indexes.

Here's a rough draft (still buggy, needs finished):

var request = new XMLHttpRequest();
request.open('GET', '/my/directory/', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
  }
};

request.send();
var directory_listing = resp;
var regexp = /\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))/i;
var match, files = [];

while ((match = regexp.exec(resp)) != null) {
  files.push(match.index);
}

console.log(files);

Answer 2

Building off lilHar's answer, we can use DOMParser to create a shadow-DOM for the directory page we're accessing, and then use that to find any links we need:

// relative path to the desired directory
const directory = "/DIRECTORY-NAME/";

// selector for the relevant links in the directory's index page
const selector = "LINK SELECTOR";

const request = new XMLHttpRequest();
request.open("GET", directory, true);

request.onload = () => {
    // succesful response
    if(request.status >= 200 && request.status < 400)
    {
        // create DOM from response HTML
        const doc = new DOMParser().parseFromString(request.responseText, "text/html");

        // get all links
        const links = doc.querySelectorAll(selector);
        console.log("Links:", links);

        links.forEach(link => {
            // do stuff with the links
        });
    }
};

request.send();

Answer 3

Is there a decent way in front-end JS to do this?

No. Nor is that a way that isn't decent.

The front end can communicate with the server via HTTP or WebSockets.

Neither of those provides any built-in mechanism for exploring a filesystem.

You need the server to provide an API (e.g. a web service) which provides the information you want.