Freelance Web Development

Fancy Upload, a form widget that makes it appear as if we’ve styled the ‘browse…’ button and file name field with only CSS, is now on github:

http://github.com/WebVeteran/fancy-upload/

Fancy Upload github

Sometimes a client will ask me to make a styles upload form, and of course modify the ugly ‘Browse…’ utility. But we’re very limited to styling upload forms. We cannot rearrange the buttons, nor change the ‘Browse’ label. Even with CSS the browse button and the file name field act… funky.

So I’ve come up with a way to make it appear as if we’ve styled the ‘browse…’ button and file name field… with only CSS. Since I did not specify any widths in pixels, we will have a nice cross browser solution. Then by adding some javascript we have total control of the file name, and even add an icon.

And we’re going to make it so that the fancy form only shows in a modern browser (Safari 1.0+, Firefox 1.0+, Internet Explorer 5.5+/Win, Opera 8+). It will degrade gracefully when images, JavaScript, and/or CSS are not active. The markup validates to the XHTML 1.0 Transitional DOCTYPE.

Fancy Upload

Live Demo

I’ll have this up on github shortly!

Fancy Upload CSS, file upload, JavaScript