Display Styled Directory Contents

Read the current directory of files and displays a styled table of their name, file type, and file size. Icons for the different major file types (audio, doc, html, image, pdf, psd, and video).

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Display Directory Contents</title>
   <style>
     *{
         padding:0;
         margin:0;
     }
     html,body {
         color:#333;
         font-family: "Lucida Console", Courier, monospace;
         font-size:14px;
         text-shadow:1px 1px 1px #cacaca;
         -webkit-text-shadow:1px 1px 1px #cacaca;
         -moz-text-shadow:1px 1px 1px #cacaca;
     }
     a{
         padding: 2px 0 0 24px;
         color:#FE4902;
         text-decoration:none;
     }
     a:hover{
         color:#000;
     }
     #container{
         margin:0 auto;
         width:700px;
         margin-top:20px;
         padding-top:10px;
         border:1px solid #EEE;
         border-radius:10px;
         -moz-border-radius:10px;
     }
     .head{
         background-color:#FE4902;
         color:#FFF;
         font-weight:bold;
         padding:7px 0 5px 10px;
         font-size:14px;
         letter-spacing:1px;
         font-family: Verdana, Arial, Helvetica, sans-serif;
     }
     .head:hover{background-color:#FE4902;}
     .head span{font-size:9px; letter-spacing:0;}
     td{
         background-color:#F3F3F3;
         padding:6px;
     }
     td:hover{background-color:#EFEFEF;}
     h1{
         font-size:18px;
         font-weight:bold;
         padding:0 0 10px 10px;
     }

     /*icons for file types (add more to suit your needs - icons by famfamfam.)*/

     /*images*/
     a[href$=".jpg"] {background: url(image.gif) no-repeat left 50%;}
     a[href$=".gif"] {background: url(image.gif) no-repeat left 50%;}
     a[href$=".png"] {background: url(image.gif) no-repeat left 0%;}

     /*pdfs*/
     a[href$=".pdf"] {background: url(pdf.gif) no-repeat left 50%;}

     /*psds*/
     a[href$=".psd"] {background: url(psd.gif) no-repeat left 50%;}

     /*docs*/
     a[href$=".doc"] {background: url(doc.gif) no-repeat left 50%;}
     a[href$=".txt"] {background: url(doc.gif) no-repeat left 50%;}

     /*videos*/
     a[href$=".avi"] {background: url(video.gif) no-repeat left 50%;}
     a[href$=".m4a"] {background: url(video.gif) no-repeat left 50%;}
     a[href$=".mov"] {background: url(video.gif) no-repeat left 50%;}
     a[href$=".mp4"] {background: url(video.gif) no-repeat left 50%;}
     a[href$=".wmv"] {background: url(video.gif) no-repeat left 50%;}

     /*audio*/
     a[href$=".mp3"] {background: url(audio.gif) no-repeat left 50%;}
     a[href$=".wma"] {background: url(audio.gif) no-repeat left 50%;}
     a[href$=".aac"] {background: url(audio.gif) no-repeat left 50%;}

     /*web pages*/
     a[href$=".html"] {background: url(html.gif) no-repeat left 50%;}
     a[href$=".php"] {background: url(html.gif) no-repeat left 50%;}

   </style>

</head>
<body>

   <div id="container">
       <?php
         // opens this directory
         $myDirectory = opendir(".");

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

         // finds extention of file
         function findexts ($filename)
         {
           $filename = strtolower($filename) ;
           $exts = split("[/\\.]", $filename) ;
           $n = count($exts)-1;
           $exts = $exts[$n];
           return $exts;
         }

         // closes directory
         closedir($myDirectory);

         //  counts elements in array
         $indexCount   = count($dirArray);

         // sorts files
         sort($dirArray);

         // print 'em
         print("<h1>Directory Contents</h1>");
         print("<table width='100%' cellspacing='10'>
                 <tr>
                   <td class='head'>Filename</td>
                   <td class='head'>Type</td>
                   <td class='head'>Size <span>(bytes)</span></td></tr>\n");

         // loops through the array of files and print them all
         for($index=0; $index < $indexCount; $index++) {
               if (substr("$dirArray[$index]", 0, 1) != "."){ // don't list hidden files
               print("<tr><td><a href='$dirArray[$index]'>$dirArray[$index]</a></td>");
               print("<td>");
               print(findexts($dirArray[$index]));
               print("</td>");
               print("<td>");
               print(filesize($dirArray[$index]));
               print("</td>");
               print("</tr>\n");
           }
         }
         print("</table>\n");
       ?>
   </div>

</body>
</html>

Thanks to Andrew Champ.

Reference URL

Subscribe to The Thread

Thomas J
10/23/2009
You need to change line 136 to this to avoid a Parse error.
a href='$dirArray[$index]'
After that this works perfect! Thanks for sharing!
//T
Reply ↓
- Chris Coyier
  10/23/2009
  There were \” marks in there to make sure that wasn’t a problem but for whatever reason weren’t showing up in the displayed code. I just made them single ticks to avoid problems, thanks!
Thad Bloom
10/23/2009
Very nice script, thanks for sharing!
Reply ↓
Mike Smith
10/23/2009
nice script. I’m sure I can find something to use this for :)
Reply ↓
Steven Rossi
10/23/2009
Looks really cool – I’ll definitely be using this for something or other.
Reply ↓
kenaku
10/25/2009
sweet. and so simple. thanks!
Reply ↓
fabuio
10/27/2009
Nice. Thanks.
line 141:
print(number_format((filesize($dirArray[$index])), 0, ”, ‘,’));
Reply ↓
Aziz Light
10/29/2009
Nice!
One thing though: where can I find the little icons on the left of the file/folder please?
Reply ↓
- Andrew Champ
  11/01/2009
  Here are the icons I used, they’re great for everything!
  http://www.famfamfam.com/lab/icons/
Mark, eLearning Designer
11/10/2009
Thanks for this. This is a great bit of code and very easy to add even for a php newb like me.
Reply ↓
Maggie Wolfe Riley
11/18/2009
I’m getting an error from this line: print(filesize($dirArray[$index]));
I think it’s line 141 in the original, but I am just using the php part as an include with my own CSS so it’s line 48 in mine. Here is the error:
Warning: filesize() [function.filesize]: stat failed for archives in /..(path to my website).org/includes/directory_contents.php on line 48
I believe the error is because it is printing out the parent directory folder (and its parent, too), which have no filesize. It works great, except for those two lines – and I can’t figure out why they even are being printed, since they are not files IN the directory… My folder structure is /newsletters/archives/index.php and the first row of the table displaying the files shows “archives,” with the error under the filesize column, and the last row of the table shows “newsletters” and another filesize error.
I’m just learning PHP, but I think a line to set the condition if there is no suffix, don’t include it might be fairly easy… for someone who is more fluent in PHP, anyway :)
Anyone have any ideas? Thanks!
Reply ↓
- Maggie Wolfe Riley
  11/18/2009
  I’m trying to figure it out, but realized that setting a condition for not printing a file without a “.” in the string won’t work, because the “files” that are causing the errors don’t actually exist – it’s showing the parent and “grandparent” directories as if they were files IN the directory – /newsletters/archives/archives and /newsletters/archives/newsletters
  I can’t figure out what is causing that, and since they don’t actually exist in the directory, my idea for setting a condition of not printing a string without a “.” in it won’t have any effect. And it hasn’t.
  Here’s the page:
  http://bristleconecnps.org/newsletters/archives/index.php
Maggie Wolfe Riley
11/18/2009
I got it to stop displaying the empty line at the top and the first error – the archives one, by changing the loop to this:
for($index=4; $index < $indexCount; $index++) {
starting at “1″ instead of 0 got rid of the blank, and starting at “4″ takes into consideration the two parent directories which aren’t being shown plus the weird error one, and starts on the first real file. There is still the error at the end (last row) of the table.
Okay, my head hurts, and I hope some of you wonderful PHP people and problem solvers have some better ideas!
Thanks.
Reply ↓
- Maggie Wolfe Riley
  11/18/2009
  I just fixed it:
  for($index=4; $index < $indexCount-1; $index++) {
  (added -1 to the index count so it wouldn’t show the last “file”)
  This is obviously a workaround that is specific to that file structure – if the directory was at a different level it would need to start at a different place, which makes using this code as an include for any directory index file I want on my site not as simple, but hey, it works!
  Sorry for all the multiple comment posts, but I hope it may be helpful and/or interesting to someone! :)
  And if someone has a better idea that will fix it instead of hiding it, I would love to hear it.
  Thanks!!
- Laurent Jouvin
  03/22/2010
  This will prevent the last file from being listed in the directory. Do you have any idea on how to prevent the index.php from showing?
Laurent Jouvin
03/17/2010
Very cool. Thank you very much Chris. I know I’m late in the game here but I’m definitely gonna use your script.
Reply ↓
Laurent Jouvin
03/22/2010
OK… I’ve played with this and it works great. Really excited about this but I don’t know enough to start adding stuff to the code. But what about adding a download function to the directory? Each of the items would get their own download button. Just an idea in case someone would like to try it. Thanks again for the script!
Reply ↓
Chris
06/10/2010
Hey this is great code works so sweet!
But I need to open up a different dir to where the script is located how do i do that?
Reply ↓
Tom S
08/23/2010
Cannot get this to work. It only displays the headers on my page… no file listings, and there are plenty of files in the directory.
Any thoughts?
Reply ↓
David
09/14/2010
Anyone know how to get it to NOT display certain given files such as the favicon or the index.php file?
Better still for me: how do i make display ONLY the folder names?
Useful script. Thanks.
David
Reply ↓
- Benjamin
  09/29/2010
  Hi David,
  I had a closer look at this script, very useful indeed… my suggestion for you are:
  Define (just before the while-loop): $forbiddenExts = array(“php”, “ico”, “html”);
  In the while-loop, do the same as in findexts():
  while($entryName = readdir($myDirectory)) { $exts = explode(".", $entryName); if(!in_array($exts[1],$forbiddenExts)) { $dirArray[] = $entryName; } }
  And if you want to display only folders, then add another line of code just before the first if:
  if (!is_file($entryName)) { // the lines above }
  Altogether:
  // opens this directory $myDirectory = opendir("."); // set forbidden files $forbiddenExts = array("php", "ico", "html"); // gets each entry while($entryName = readdir($myDirectory)) { if (is_file($entryName)) { $exts = explode(".", $entryName); if(!in_array($exts[1],$forbiddenExts)) { $dirArray[] = $entryName; } } }
- Benjamin
  09/29/2010
  !is_file()… you don’t want to display files… in my script I don’t want to display folders… ;-)
heath
10/05/2010
great script, but i can’t figure out how i can change the folder.
every time i change the directory there will appear a mistake in that in in which sort($dirArray); located.
what i’m supposed to do?
Reply ↓
Justin Cilliers
01/20/2011
just another method i have used before, which displays the contents of a folder, and gives a link and preview… if anybody wants the code, let me know. example is http://www.inktecbots.com/specials.php
Reply ↓
- Terry
  04/19/2011
  Hello, I like the look of your example, can you please let me have the code
jassi
01/24/2011
hi..
i m just learning to use php… this code is gr8…
i m getting the parse error… so what is the change in line 136?
thanx
Reply ↓
jon
03/20/2011
hey, im getting this to work really well, but what if i wanted to display folders and files, but excluding the php and icon files? what would i need to change?
Reply ↓
- Ellisgeek
  03/25/2011
  look at @Benjamin’s post above yours!
jon
03/29/2011
right…but in some instances i want it to display both files AND folder, but NOT the *.ico and *.php files
Reply ↓
Rafael Trabasso
04/05/2011
Life. Saver.
I have customized the script to create a simple with links from given folders. You don’t know how this helped me out, thanks a lot.
Reply ↓
Prad
05/26/2011
Thanks buddy! helped me a lot
Reply ↓
Martin
06/19/2011
if one chances the line $myDirectory line to:
$myDirectory = opendir(“c:\docs”);
The files in the docs directory are listed correctly, however, when one clicks on the link the link ties to load the file from the localhost directory.
Is there an easy way of linking to the the files in the c:\docs directory?
Thanks
Reply ↓
Gokul
06/23/2011
Thanks for this piece of code. Cute one
Reply ↓
Akhilaa
08/02/2011
Im learner for php. This code show some error. the extenson of this file is .php rite?
Reply ↓
Akhilaa
08/02/2011
excatly wht my requirement is to dispaly the file in particular local folder in webpage…. so tht clicking on the links the file shuld get downloaded….. pls can anyone help me in doin this?. i need in html
Reply ↓
Mick
08/03/2011
Just as a heads up, split() is deprecated in php5.3 so you will want to modify like so:
$exts = explode("[/\\.]", $filename) ;
Reply ↓
- Yenssen
  09/20/2011
  It worked for me. Thank you very much for share!
Brian
09/14/2011
This is not working for me. I used it as it is in php 5 but i is not working at all. what should I modify?
Reply ↓
Jack
09/22/2011
I’m having an issue displaying the file size when I change the directory.
http://infasyssolutions.com/control.php
Above is what I’m trying to make work. If i leave it to the (“.”) everything works perfect, but when I change it to (“images”) everything but the file size works. Any ideas as to why?
Reply ↓

Code Snippet

Display Styled Directory Contents

Subscribe to The Thread

Speak, my friend

Posting tips:

Thank you,
~ The Management ~

DigWP

Quotes on Design

HTML-Ipsum

Bookshelf

Code Snippet

Display Styled Directory Contents

Subscribe to The Thread

Speak, my friend

Posting tips:

Thank you,~ The Management ~

DigWP

Quotes on Design

HTML-Ipsum

Bookshelf

Thank you,
~ The Management ~