CSS-Tricks*

A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Code Snippets > PHP > Display Styled Directory Contents Submit one!

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

  1. Thomas J says:
    10/23/2009 at 12:41 am

    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 says:
      10/23/2009 at 6:12 am

      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!

  2. Thad Bloom says:
    10/23/2009 at 9:37 am

    Very nice script, thanks for sharing!

    Reply
  3. Mike Smith says:
    10/23/2009 at 10:48 am

    nice script. I’m sure I can find something to use this for :)

    Reply
  4. Steven Rossi says:
    10/23/2009 at 12:34 pm

    Looks really cool – I’ll definitely be using this for something or other.

    Reply
  5. kenaku says:
    10/25/2009 at 4:12 pm

    sweet. and so simple. thanks!

    Reply
  6. fabuio says:
    10/27/2009 at 3:55 am

    Nice. Thanks.

    line 141:
    print(number_format((filesize($dirArray[$index])), 0, ”, ‘,’));

    Reply
  7. Aziz Light says:
    10/29/2009 at 9:09 am

    Nice!

    One thing though: where can I find the little icons on the left of the file/folder please?

    Reply
  8. Mark, eLearning Designer says:
    11/10/2009 at 9:23 pm

    Thanks for this. This is a great bit of code and very easy to add even for a php newb like me.

    Reply
  9. Maggie Wolfe Riley says:
    11/18/2009 at 8:09 am

    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 says:
      11/18/2009 at 10:05 am

      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

  10. Maggie Wolfe Riley says:
    11/18/2009 at 10:28 am

    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 says:
      11/18/2009 at 10:33 am

      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 says:
      03/22/2010 at 10:45 am

      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?

  11. Laurent Jouvin says:
    03/17/2010 at 5:17 pm

    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
  12. Laurent Jouvin says:
    03/22/2010 at 9:58 am

    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
  13. Chris says:
    06/10/2010 at 10:02 am

    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
  14. Tom S says:
    08/23/2010 at 11:41 am

    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
  15. David says:
    09/14/2010 at 9:54 am

    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 says:
      09/29/2010 at 7:29 am

      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 says:
      09/29/2010 at 7:38 am

      !is_file()… you don’t want to display files… in my script I don’t want to display folders… ;-)

  16. heath says:
    10/05/2010 at 12:35 pm

    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
  17. Justin Cilliers says:
    01/20/2011 at 12:29 am

    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
  18. jassi says:
    01/24/2011 at 8:15 am

    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
  19. jon says:
    03/20/2011 at 6:50 pm

    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

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---