CODEWITHSUNDEEP
javascriptjquery
BevansDesign
BevansDesign

Reputation: 5108

Using .get() to retrieve an array of all file names in a folder on my server

I'm able to display a list of all the files in a folder on my server with this code:

$(document).ready(function() {
  $.get("/mockups/bryan/file_list/", function(allFiles) {
    $("#fileNames").append(allFiles);
    console.log(allFiles);
  });
})

However, the data it retrieves is a fully formatted web page generated by my server, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
 <head>
  <title>Index of /mockups/bryan/file_list</title>
 </head>
 <body>
<h1>Index of /mockups/bryan/file_list</h1>
<pre><img src="/icons/blank.gif" alt="Icon "> <a href="?C=N;O=D">Name</a>                    <a href="?C=M;O=A">Last modified</a>      <a href="?C=S;O=A">Size</a>  <a href="?C=D;O=A">Description</a><hr><img src="/icons/back.gif" alt="[PARENTDIR]"> <a href="/mockups/bryan/">Parent Directory</a>                             -   
<img src="/icons/image2.gif" alt="[IMG]"> <a href="092018-powersale_CTA.jpg">092018-powersale_CTA..&gt;</a> 2018-09-19 09:57  7.2K  
<img src="/icons/image2.gif" alt="[IMG]"> <a href="092018-powersale_cat1.jpg">092018-powersale_cat..&gt;</a> 2018-09-19 09:26   41K 
...

I only want an array containing the names of all the files in that folder so I can create my own page for displaying and linking to them.

Is there a better way to do this? Maybe .get() is the wrong tool to use, or maybe I'm using it wrong. (Or both.) I was about to dig in with some RegEx stuff to extract the info I want, but then thought "there has to be a better way!"

Upvotes: 0

Views: 317

Answers (1)

Teemu
Teemu

Reputation: 23416

Yes, there's a better way than RegExp. Create a documentFragment from the response text, and extract the links from that. Like so:

$.get("/mockups/bryan/file_list/", function (allFiles) {
    let fragment = document.createDocumentFragment();
    let wrapper = document.createElement('div');
    let fileNames = [];
    // Put allFiles to the newly-created div
    wrapper.innerHTML = allFiles;
    // Append the elements from the div to the documentFragment
    Array.from(wrapper.childNodes).forEach(node => 
        fragment.appendChild(node);
    });
    // Collect links, and extract hrefs to fileNames array
    let links = fragment.querySelectorAll('a');
    let len = links.length;
    for (let n = 5; n < len; n++) { // Starting from 5 excludes the list headers
        fileNames.push(links[n].getAttribute('href'));
    }
    // Append filenames list to the page
    $("#fileNames").append(fileNames.join('<br>'));
});

WARNING! For the local network use only. This code is not recommended to read folder contents at a public web server, use server-side code to send filenames to clients.

It's a bit hackish to add the DTD and html, head and body tags to a div, but setting innerHTML will remove these tags, and only the relevant content is added.

I've extracted the filenames from the href attributes, but if the link texts are decent, you can use textContent property instead of getAttribute method. Reading href property of the link usually adds the full path to the value.

Upvotes: 1

Related Questions