Skip to Content

Aarron Walter

XHTML | CSS |

Categories

My Book: Building Findable Websites

Building Findable Websites: Web Standards, SEO, and Beyond
Building Findable Websites: Web Standards, SEO, and Beyond
Aarron Walter
Buy on Amazon
Book's Companion Website
“Companies waste fortunes seeking a magic bullet for Search Engine Optimization. But the keys to honest, effective web findability are appropriate writing and semantic markup. Aarron Walter’s wonderfully lucid and informative book tells everything you need to know to get your web content (or your client’s) in front of as many appreciative readers as possible.”

- Jeffrey Zeldman, founder, Happy Cog Studios author, Designing With Web Standards, 2nd Edition

Now playing on my computer

Bill Moyers Journal – Rage on the Radio Track | Artist
Bill Moyers Journal – Andrew J. Bacevich Track | Artist
CNN – CNN=Politics Daily Track | Artist
CNN – CNN=Politics Daily Track | Artist
The New York Times – NYT: Front Page for 10/2/2008 Track | Artist
My Playlist Feed | My Last.fm Profile

Recent Photos From Flickr

Lincoln Balogna and Washinton Cheese, Sat, 2 Aug 2008 12:58:15 -0800 George Washington Cheese, Sat, 2 Aug 2008 12:55:09 -0800
Abe Lincoln Balogna, Sat, 2 Aug 2008 12:51:37 -0800 So many choices, Thu, 17 Jul 2008 15:11:20 -0800
My Flickr Photo Stream | All Photos

Displaying File Icons for Downloads With PHP

« Transforming Unwieldy URLs into Something Better
Building a Listening Library of Web Design Podcasts »
14 Dec . 2006

I've worked on a few projects where a client had a series of files they wanted to offer as downloads, and the file types were all different. It's nice to show users what type of file they are downloading with an icon that represents that format. To do this, I store the file info in a table that might look something like this:

Files Table

The $_FILES super global variable gives you access to all of this useful information about your file when it is uploaded, and storing it in the table along with the file name and date posted makes looping through them to display on a file download page convenient and easy. If your file form tag was called "newFile", here's what your SQL statement might look like to store the record in your database:

PLAIN TEXT
PHP:
  1. $sql = "INSERT INTO filesTable SET fileTitle='".$_POST['fileTitle']."', fileName='".$_FILES['newFile']['name']."', fileSize='".$_FILES['newFile']['size']."', fileType='".$_FILES['newFile']['type']."', datePosted='".time()."' ";

With the file type stored, when you pull the records out for display, you can use the fileType field to generate an image tag with the
corresponding file type icon. I wrote a simple function to handle this for me that I keep in an external file, and simply pass it the fileType and fileName strings to get the correct image tag. Here's what that looks like:

PLAIN TEXT
PHP:
  1. <?
  2. function icon($file, $filename){
  3.  
  4. // Determine File Type
  5. // See list of all possible mime types at http://www.webmaster-toolkit.com/mime-types.shtml
  6. switch( $file ){
  7.  
  8. case "text/html": $file = "html.gif"; $alt = "HTML File"; break;
  9.  
  10. case "text/shtml": $file = "html.gif"; $alt = "HTML File"; break;
  11.  
  12. case "image/pjpeg": $file = "jpeg.gif"; $alt = "Progressive Jpeg Image"; break;
  13.  
  14. case "image/jpeg":$file = "jpeg.gif"; $alt = "Jpeg Image"; break;
  15.  
  16. case "image/png": $file = "png.gif"; $alt = "PNG Image"; break;
  17.  
  18. case "image/gif": $file = "gif.gif"; $alt = "GIF Image"; break;
  19.  
  20. case "image/tiff": $file = "tiff.gif"; $alt = "Tiff Image"; break;
  21.  
  22. case "application/pdf": $file = "pdf.gif"; $alt = "PDF File"; break;
  23.  
  24. case "application/word": $file = "word.gif"; $alt = "Word Document"; break;
  25.  
  26. case "application/msword": $file = "word.gif"; $alt = "Word Document"; break;
  27.  
  28. case "application/powerpoint": $file = "excel.gif"; $alt = "Excel Spreadsheet"; break;
  29.  
  30. case "application/excel": $file = "powerpoint.gif"; $alt = "Powerpoint Presentation"; break;
  31.  
  32. case "text/plain": $file = "txt.gif"; $alt = "Plain Text File"; break;
  33.  
  34. case "application/zip": $file = "zip.gif"; $alt = "Zip Archive"; break;
  35.  
  36. case "application/x-stuffit": $file = "sit.gif"; $alt = "Stuffit Archive"; break;
  37.  
  38. case "application/x-msdownload": $file = "exe.gif"; $alt = "Executable"; break;
  39.  
  40. case "application/octet-stream":
  41. // Find Out If File Is PSD
  42. if( eregi(".psd",$filename) ){
  43. $file = "psd.gif"; $alt = "Photoshop Document";
  44. }elseif( eregi(".icc",$filename) ){ // Find Out if File Is ICC
  45. $file = "icc.gif"; $alt = "ICC Profile";
  46. }else{
  47. // Use Generic Icon
  48. $fileicon = "doc.gif"; alt="Unknown File Type";
  49. }
  50. break;
  51.  
  52. default: $file = "file.gif"; $alt = "Unknown Tile Type"; break;
  53.  
  54. }
  55.  
  56. $imgTag = "<img xsrc=\"images/$file\" alt=\"$alt\" />";
  57.  
  58. return $imgTag;
  59.  
  60. }
  61. ?>

The function is really just a big switch statement looking at the fileType string. The reason I pass the fileName string as well is because certain files like PSDs, and color correction profiles (ICC), share the same MIME type. Actually there are a lot of file types that share the "application/octet-stream" MIME type, so checking the file's extension can provide a means of determining what kind of file it really is. Note, this is not a sure fire solution if the file does not have an extension or has the wrong one. If the function gets stumped, it returns a generic file icon instead. Here's how you would use it:

PLAIN TEXT
PHP:
  1. <?
  2. // include fileIcon function
  3. require_once('inc/fileIcon.php');
  4.  
  5. $sql = "SELECT * from filesTable ORDER BY datePosted";
  6. $result = mysql_query($sql);
  7.  
  9. <ul>';
  10. while( $row = mysql_fetch_array($result) ){
  12.     <li><a xhref="files/'.$row['fileName'].'">'.icon($row['fileType'],$row['fileName']).' '.$row['fileTitle'].'</a></li>
  13. ';
  14. }
  15. echo '</ul>
  16. ';
  17. ?>

You could easily extend the icon function to recognize many other formats just by adding new cases. To see a complete listing of MIME types visit http://www.webmaster-toolkit.com/mime-types.shtml. You can download a good starter set of file icons here: File Icons

Written 1 year, 9 months ago in Development, PHP. | Respond | Comments Feed: RSS 2.0 | Trackback

3 Responses to “Displaying File Icons for Downloads With PHP”

  1. NAcho Says:

    It will be better to obtain the icon directly from the system.
    In java that can be easily achieved:

    //Create a temporary file with the specified extension
    file = File.createTempFile("icon", "." + extension);

    FileSystemView view = FileSystemView.getFileSystemView();
    Icon icon = view.getSystemIcon(file);

    //Delete the temporary file
    file.delete();

    i dont know how to do it in php, but sure it is possible, since the icon is provided by the system.
    Regards,
    Nacho

    July 4th, 2007 at 8:54 am
  2. Rich Lyon Says:

    There is a much easier method,

    Once you have the extension, do something like:

    $ext = // get extension

    if( file_exists("./icons/".$ext.".png") ){
    $img = "./icons/".$ext.".png";
    } else {
    $img = "./icons/unkown.png";
    }

    print "";

    September 27th, 2007 at 6:07 pm
  3. Large balloon guy Says:

    Interesting thing nacho is mentioning. It would be cool if it was a system icon so the users os would know what to do with the file. I have never seen anything like it in PHP. We are more talking about browser restrictions here.

    January 15th, 2008 at 5:07 pm

Share Your Thoughts

* indicates required