CFDirectoryLister directory browser and data image URLs

Filed under: ColdFusion

comments (5) Views: 1,777

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.

cfdirectorylister screenshot 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

Amazon logo

If this article was interesting, or helpful, or even wrong, please consider leaving a comment, or buying something from my wishlist. It's appreciated!

you should add this to riaforge or something.

alex - September 06, 2012 10:47 am

Yeah!!!
This is great.
Thanks for your sharing.

Thomas Miller - October 08, 2012 12:46 am

Glad you like it Thomas.

andy matthews - October 08, 2012 09:09 pm

Andy,

This looks cool, but is specific to CF9 or greater. I attempted to get this to run on CF 8.0.1 and ran into two issues:

1. The argument definitions in the functions were illegal in CF8. I shortened these to single words to fix that issue.

2. The local.icons definition in the getIcon function throws an invalid CFML construct error. (Is this a CF9 specific syntax?)

Any thoughts on making this CF8 compatible?

Thanks.

David - October 30, 2012 07:31 am

David...

Making this valid for CF8 would be awesome. I no longer have access but if you've made fixes for it I'd be happy to add it to Github and give you credit. Sounds like you already fixed issue #1, issue number 2 is easy as well. ColdFusion 8 doesn't allow inline object creation so change the code from this:

var local = {
'ai' = 'asdlkjasldk'
};

to this:

var local = {};
local['ai']= 'asdlkjasldk'

andy matthews - November 01, 2012 07:36 am