Listing files of a directory in a static webpage

Question

Is there any way to list the files of a directory in a static webpage with the link to view the file?

I would like to upload some PDF files to a certain directory of my static website (it uses HTML and JS), and want to show the list of the files in a page with the link to view the pdf files. That way, if I upload new files, I don't have to modify the HTML page every time. Is there any way to do that?

Answer 1

If you are using Apache as a web-server and have configured mod-autoindex for the directory you upload pdf files then you should probalby see somethink like this when navigation to that url:

This auto-generated page can be easily parsed by js using jquery:

var pdfFilesDirectory = '/uploads/pdf/';

// get auto-generated page 
$.ajax({url: pdfFilesDirectory}).then(function(html) {
    // create temporary DOM element
    var document = $(html);

    // find all links ending with .pdf 
    document.find('a[href$=.pdf]').each(function() {
        var pdfName = $(this).text();
        var pdfUrl = $(this).attr('href');

        // do what you want here 
    })
});

Answer 2

1. Open a browser
2. Navigate to the folder you want listed
3. If you see a list of the files, continue
   • If you don't see a list of the files, Take a look at this: Is it possible to get a list of files under a directory of a website? How? to figure out how to do that.
4. Make an ajax call to that folder (example below)
5. response will be the html of the listing page
6. You can parse that out to get the file listing

---

Example:

// This is in angular, but you can use whatever
$http.get('folder_to_list/').success(function(response) {
    console.log(response);
});