List of directory files on a web page

Question

Is there a way to list the directory files on a web page with a link to view the file.

I would like to upload some PDF files to a specific directory of my static website (html + js) and want to show a list of files on a page with a link to view PDF files, so that if I upload new files I don’t need to change the html page every time, is there any way to do this?

Answer 1

If you are using Apache as a web server and have configured mod-autoindex for the directory into which you upload pdf files, you should try to see something like this when navigating to this URL:

This automatically 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

You must have a server-side implementation, you can do this using PHP. You cannot do this using JavaScript, because it runs on the client side and cannot access files on the server.

Answer 3

You need a combination of javascript and PHP. You can invoke a PHP file through Javascript using an AJAX call. try this php file which should return a 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 have to go through the Json object to list the URL.

Something like:

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

Not tested, but something like this should work.

Answer 4

Be simple. Put all your files in a directory and do not create the home page of this directory. Then on the page you want to add an Iframe that displays this directory. Then you will see a list of the files you uploaded, all in hyperlinks. When you click on links, Iframe will display PDF files.

Answer 5

I created a node module to automate the task of retrieving all files and folders: mddir

Using

node mddir "../relative/path/"

To install: npm install mddir -g

To create markdowns for the current directory: mddir

Generate for any absolute path: mddir / absolute / path

Generate for relative path: mddir ~ / Documents / whatever.

The md file is created in your working directory.

Currently ignoring the node_modules and .git folders.

Troubleshooting

If you get the error message "node \ r: There is no such file or directory", the problem is that your operating system uses different line endings and mddir cannot parse them without explicitly setting the line ending style on Unix. This usually affects Windows, but also some versions of Linux. Setting the end of the line in Unix style should be done in the bin mddir npm global folder.

Line fixes

Get the path to the npm bin folder with:

npm config get prefix

Cd to this folder

brew install dos2unix

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

This converts line endings to Unix instead of Dos

Then do as usual: node mddir "../relative/path/".

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

Automatic Generated Documentation (Alpha)

Functionality so far:

Creates a tree folder structure in node that appears as a tree in the browser. Click on the file (non-root level) to fill in the main view.

Soon:

Creates a documentation guide, including function names and parameters, function dependencies, etc. Originally compatible with jQuery and a simple JavaScript function name extension, which will soon be compatible with React, Redux, Angular 1, Angular 2, and other frames on request.

Using

node agd relativePath

eg. node agd '../../'

Generated .json code.

Launch 'node http-server', then open a browser to view the file structure displayed in the sidebar. Large projects can take up to a minute or two to do.

See .json code, for example, generated data.

To-do: add code content for top-level files. Move the html tree to node.

Contact [e-mail]

MIT License

An example of a generated tree structure

Answer 6

Instead of JavaScript that runs only on the client side, you should consider using PHP or another server language to scan your file directory and list it in an HTML file / template. PHP, for example, has a scandir function that can display files in a dicrectory

Answer 7

• Open browser
• Go to the folder you want to list.
• If you see a list of files, continue
  • If you do not see the list of files, check out this: Is it possible to get a list of files in the site directory? How? figure out how to do it.
• Make ajax call to this folder (example below)
• response will be the html listing page
• You can parse this to get a list of files

---

Example:

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