Using PHP to Display Directory Contents With a Select List

Sometimes there is a need to display the list of files in the directory and allow a user to select a file name from the list. We run into this most often when a user must be able to select an image or a document to be downloaded or displayed after being selected. Here is a very simple PHP script that will display the content of a web site directory using an HTML select list.

First of all, the script will need to be embedded in an HTML form in a script that will run PHP. It would take the place of a standard hard-coded drop-down select list or an input box. The difference is that this script will display the file names from a server directory that you designate. You will need to embed the script in a form so that you can pass the selected value to another script. This will not work in a standard script using the .htm or .html extension, unless your server is configured to run these script through the PHP parser.

This is the basic form of the select list script. As you can see, it is actually pretty simple and should be easy to implement if you have basic PHP skills. For the example we will display a list of image file names found in a directory. We are using PHP’s dir function to read the directory.

<select name="ImageFile">
<option value="">- Select Image -
<?php 
$dirPath = dir('/images');
while (($file = $dirPath->read()) !== false)
{
   echo "<option value=\"" . trim($file) . "\">" . $file . "\n";
}
$dirPath->close();
?>
</select>

The important part to make this script display the file names from the correct directory is to make sure that the path to the directory is correct. The path is set in the statement $dirPath = dir(‘/images’);. This path will work for a script in the root directory that is calling the /images/ directory that is one level down from the root. The path is a relative path, which means the path must be set with respect to the location of the script in a web site.

Here is what we have thus far:

- Select Image -trees.pngflowers.jpgantcolony.gifbirdsnest.png

The obvious problem with this directory select list is that the file names are not sorted. Unfortunately, the PHP dir directory function returns a list of file names that appears to be random. While that is not a significant issue if you only want to display 3 or 4 file names, it can be a problem if the directory contains a larger number of files. Ideally, you would want the list to be sorted alphanumerically.

Improving the Select List by Sorting the Directory Contents

For unknown reasons the PHP development team did not include a method to sort the results. However, there is a fairly simple modification that does accomplish this. We are going to read the images directory and pass the results to an array, sort the array, and use the array to form the option statements in the select box.

<select name="ImageFile">
<option value="">- Select Image -
<?php 
$dirPath = dir('/images');
$imgArray = array();
while (($file = $dirPath->read()) !== false)
{
   $imgArray[ ] = trim($file);
}
$dirPath->close();
sort($imgArray);
$c = count($imgArray);
for($i=0; $i<$c; $i++)
{
    echo "<option value=\"" . $imgArray[$i] . "\">" . $imgArray[$i] . "\n";
}
?>
</select>

The select list is now sorted as follows:

- Select Image -antcolony.gifbirdsnest.pngflowers.jpgtrees.png

Filtering the Select List

If you have a directory with a mix of different file types, you probably do not want your list to be cluttered with unrelated files. You can easily filter the list displayed using the HTML select drop-down by adding a conditional statement

<select name="ImageFile">
<option value="">- Select Image -
<?php 
$dirPath = dir('/images');
$imgArray = array();
while (($file = $dirPath->read()) !== false)
{
  if ((substr($file, -3)=="gif") || (substr($file, -3)=="jpg") || (substr($file, -3)=="png"))
  {
     $imgArray[ ] = trim($file);
  }
}
$dirPath->close();
sort($imgArray);
$c = count($imgArray);
for($i=0; $i<$c; $i++)
{
    echo "<option value=\"" . $imgArray[$i] . "\">" . $imgArray[$i] . "\n";
}
?>
</select>

Notice the simple conditional statement addition that only allows image file types with an extension of gif, jpg or png to be displayed.