Listing files of a directory in a webpage

Question

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

I would like to upload some PDF files to certain directory of my static website (html + js), and want to show the list of the files in a page with the link to view the pdf files so that 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

You need to have a server-side implementation, you could do this by using PHP for example. You cannot do this with JavaScript, because it is run on the client-side, and cannot access the files on the server.

Answer 2

You need a combination of javascript and PHP. You could call the PHP file through Javascript, by using an AJAX call. try this PHP file which should return an Json object:

$directory = "/directory/path";
$pdffiles = glob($directory . "*.pdf");

$files = array();

foreach($pdffiles as $pdffile)
{
   $files[] = "<a href=$pdffile>".basename($pdffile)."</a>";
}

echo json_encode($files);

Now you just need to loop through the Json object to list the Url's.

Something like:

$.getJSON( "file.php", function( data ) {
  var items = [];
  $.each( data, function(val ) {
    items.push(val);
  });

  $( "body" ).append( items );
});

Did not test it, but something like this should work.

Answer 3

Be simple. Put all your files in a directory and don't make a homepage of that directory. Then, in the page you want, add an Iframe that shows that directory. Then you will see the list of files you uploaded, all in hyperlinks. When you click on the links, the Iframe will show the PDF files.

Answer 4

I made a node module to automate the task of getting all files and folders: mddir

Usage

node mddir "../relative/path/"

To install: npm install mddir -g

To generate markdown for current directory: mddir

To generate for any absolute path: mddir /absolute/path

To generate for a relative path: mddir ~/Documents/whatever.

The md file gets generated in your working directory.

Currently ignores node_modules, and .git folders.

Troubleshooting

If you receive the error 'node\r: No such file or directory', the issue is that your operating system uses different line endings and mddir can't parse them without you explicitly setting the line ending style to Unix. This usually affects Windows, but also some versions of Linux. Setting line endings to Unix style has to be performed within the mddir npm global bin folder.

Line endings fix

Get npm bin folder path with:

npm config get prefix

Cd into that folder

brew install dos2unix

dos2unix lib/node_modules/mddir/src/mddir.js

This converts line endings to Unix instead of Dos

Then run as normal with: node mddir "../relative/path/".

I made another node module call agd, to generate a tree view based on the other module: https://github.com/JohnByrneRepo/agd.

Auto generated documentation (Alpha)

Functionality so far:

Generates a tree folder structure in node, that is rendered as a treegrid in the browser. Click on a file (non-root level) to populate main view.

Coming soon:

Generates a documentation guide including function names and parameters, function dependencies, and more. Initially compatible with jQuery and plain JavaScript function namespacing, soon to be compatible with React, Redux, Angular 1, Angular 2 and other frameworks on request.

Usage

node agd relativePath

e.g. node agd '../../'

Generated code.json.

Run 'node http-server' then open the browser to view the file structure rendered in the sidebar. Larger projects can take up to a minute or two to render.

See code.json for example generated data.

To-do: Add code content for top level files. Move tree html generation into node.

Contact [e-mail]

MIT License

Example generated tree structure

Answer 5

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 6

Instead of JavaScript, which runs only on the client side, you should consider using PHP or other server language, to crawl your directory of files and list them inside an HTML file/template. PHP for example has scandir function, which can list files in a dicrectory