Create a custom upload file form field with Javascript

This page demonstrates how to create a customized upload file form field. Since CSS does not style them flexibly, Javascript must be used to gain greater control over the field's appearance. This technique degrades gracefully, displaying a regular file input form field if JS is disabled.

The technique works by overlaying a transparent file input on top of a block level element. If you have Javascript enabled, the upload file form below will be a big gray box. Click anywhere on the box and it will trigger a file dialog. If you do not have Javascript enabled, you will see a regular form.

I doubt you'd want one that looks this ugly though, so use your imagination and style it however you want. I recommend inserting some sort of "click here to upload a file" fancy image rather than a big gray box.

View source of this page to see how the technique is accomplished.

Before:

After:

The CSS used here (in case you want my ugly gray box):

.custuploadblock_js {background-color:#c0c0c0;width:300px;height:300px;display:block;position:relative;overflow:hidden;border:1px #f00 solid;cursor:pointer;} .transfileform_js {font-size:300px;height:300px;position:absolute;top:0;right:0;z-index:2;border:0;padding:0;cursor:pointer;}

Licensing

Creative Commons License This code is licensed under the Creative Commons Attribution 3.0 United States License. You are permitted to redistribute and/or modify this work for commercial or noncommercial purposes provided proper attribution to the original author (me) is present in the redistribution.