0

This is my first question.

Essentially, what I am trying to do is a display a list of local folders on my index.html page, however I am unsure as to how to do so. For example, let's say I have a list of music albums:

folder: Good Charlotte
song.mp3
folder: A Day To Remember
song2.mp3
folder: Green Day
song3.mp3

What I would like to do is to display each folder on the html page and then also be able to click on each one to access the files in the folders.

Thank you very much for your assistance in advance, and if you need any more details please do not hesitate to let me know.

Vasilis G.
  • 7,556
  • 4
  • 19
  • 29
Alin
  • 19
  • 1
  • 1
  • 3
  • 1
    You need server-side code. – SLaks Dec 11 '17 at 23:12
  • Hi, thanks for your responses. The main issue is I'm not even sure what to do, I browsed through here for an answer, couldn't find one so I ended up asking a question myself. – Alin Dec 11 '17 at 23:16
  • You need to use whatever programming language you have available on the server to read the directories and output the data or generate the html needed – charlietfl Dec 11 '17 at 23:18
  • So I have managed to use to display the files of each folder. My intention is to make it so that instead of displaying on another page, it would do it under the 'List of Songs' header. I have attached an image to give you an idea of what I am going for. – Alin Dec 11 '17 at 23:33
  • 1
    If by "local" you mean "Local to the webserver that is hosting your website" then you need to learn a server side programming language (and your questin is too broad). If you mean "Local to the computer the browser is running on", then you can't do this. – Quentin Dec 11 '17 at 23:35
  • https://imgur.com/a/2l3nu – Alin Dec 11 '17 at 23:40
  • Using JAVA applet with local filesystem HTML file, you can list a directory. However, the browser should support JAVA. In Microsoft Windows ActiveX may do it too. – SaidbakR Dec 11 '17 at 23:41
  • 1
    Node.js (js on the server) gives you the ability to read a directory's contents https://nodejs.org/api/fs.html#fs_fs_readdir_path_options_callback – Paul S. Dec 11 '17 at 23:52
  • Don't know what you got server side, but atleast in windows you can enable folder browsing in iis – user3532232 Dec 11 '17 at 23:58
  • Possible duplicate of [Listing files of a directory in a webpage](https://stackoverflow.com/questions/27860507/listing-files-of-a-directory-in-a-webpage) – rlb.usa Dec 12 '17 at 00:03

1 Answers1

1

The fastest and easiest way to do this is to simply use the default files and folders listing from your webserver.

enter image description here

Since you are asking this question I suspect it may not be enabled. Here is how to enable it :

IIS (windows):

appcmd set config /section:directoryBrowse /enabled:true|false

or use the UI. See here: https://technet.microsoft.com/en-us/library/cc731109(v=ws.10).aspx

Apache (linux):

Alias /icons/ "/var/www/icons/"

<Directory "/var/www/icons">
    Options Indexes MultiViews
    AllowOverride None
    Require all granted
</Directory>

See here : How to enable directory listing in apache web server

Styling the output

I also stumbled across this webpage that teaches how to output your own way using PHP and CSS. https://css-tricks.com/snippets/php/display-styled-directory-contents/

enter image description here

  <?php
    // Opens directory
    $myDirectory=opendir(".");

    // Gets each entry
    while($entryName=readdir($myDirectory)) {
      $dirArray[]=$entryName;
    }


    // Loops through the array of files
    for($index=0; $index < $indexCount; $index++) {
         // ...
    }
rlb.usa
  • 14,942
  • 16
  • 80
  • 128