Last October I helped launch www.psylabstudios.com, an online store for my friend Lars so he can hawk merch for his band Oneiroid Psychosis. This was my first foray into ecommerce, one that went pretty smoothly all things considered. We couldn’t use SSL, so we ended up using the Google Checkout API. I wrote a custom shopping cart for the site using the Google Checkout PHP library…

Anyway, I’m rambling. Fast forward 9 months to today. Lars emails me and asks for a way to create free items that are available for download. Things like computer wallpapers, screensavers and so on. I decided that the best way to accomplish this would be to add an “attachment” feature to store products. This way Lars could attach an arbitrary number of files to any product in the store.

The attachment plugin was fairly straightforward, since this is only an administrative feature. But I wanted it to make sure that users were clear on what exactly it was they were downloading.

I was initially going to use PHP’s mime_content_type() function to identify uploaded files, but it simply didn’t work (good thing it’s deprecated). Then I was going to use the finfo_file() function, but was unable to install PECL extensions on this particular site’s hosting environment. If you’re lucky enough to be running PHP 5.3.0, then finfo_file() is installed by default. No such luck here though.

Finally I decided to use a simple regular expression to scrape the file extension (like .jpg or .doc) from the file name. This is not a recommended way to do this, as it’s completely unreliable, but it’s better than nothing.

The above regex will return $matches[1], which should be a 2 to 4 digit file extension (without the period). Now, the magic can happen!

Since we have a fairly good guess of what the filetype is, we can now assign a CSS class to the download link that will display an appropriate file icon. As an example, a video file will get a video icon, an MP3 will get a music icon and an Excel file will get a Microsoft Excel icon (see gallery below for examples). I’m using the Fugue icon set for this site (I know I’ve been pushing those icons a lot lately, but I’m just in love with them).

Finally, we can use the filesize() function to get the size of the file and display it to the user. This way they know what they’re getting into before they click download (helpful if they’re on a slow connection).

This may seem like a lot of work, but it really isn’t. It also greatly contributes to the overall experience of your site visitors. Plus it’s a lot of fun to write shiny web-applications.

UPDATE:

You can do this even easier using CSS selectors.

a[href$='.pdf'] {
  padding-left: 16px;
  background: url('icons/pdf.png') no-repeat left;
}

All this says is look for any anchor tag whose href value ends with “.pdf” and give it a background image. This is a super easy way to add context (and a little flair) for your site visitors.