andyMatthews.net
CFDirectoryLister directory browser and data image URLs
While looking through a folder of images on my website I realized that there was no easy to way see all of the contents without knowing the actual file name. That would require FTPing to my server and sifting through everything in there until I found what I wanted. So I decided to fix that and write a quick directory listing app. Of course it's ColdFusion but it has more going for it as well.
I wanted this app to be completely self-contained, but I also wanted it to be well designed, with attractive icons. Then I realized that I could embed all of the images uising a technique called data image URLs. It's a way of embedding data into a page by encoding the file as base64. It converts the image into a long string of text which can then be used anywhere a URL to an image file would be used. If you're on a Mac encoding an image is a cinch. Run the following command, making sure to add in the path to your image file.
openssl enc -base64 -in <file name> | tr -d '
' | pbcopy
If you'd like to try out the CFDirectoryLister then head over to my Uploads folder. You can also download the source at Github