Bootstrap by Twitter File Input Box

laptop on a desk, with a notepad and pen

Afternoon, just a quick tutorial about the File Input Field using twitter styling and Jquery to keep the look of your site. Bootstrap by Twitter -, is an excellent Framework of css, jquery and html5 including lots of plugins and style options

Using their form css styling is very easy and very well thought out, using simple class names to make the field elements to look standard across your whole site.

<input class="input-xlarge" name="text" type="text" />

will give you a nice look input box:

However, as I discovered on a recent project there is not an input style available for a file input field…
So I researched good old google and this is what i came up with..

first the HTML:

<label>Brochure File</label>
<input id="pdffile" style="visibility: hidden;" name="file" type="file" />
<div class="input-append"><input id="subfile" class="input-xlarge" name="subfile" type="text" /> <a class="btn">Browse</a></div>

The div class=”input-append” will attach a button to the input field to make it look nice.walkthrough :
Firstly create a normal input type=”file” but we set it to not display (display:hidden)
We are going to use jquery magic to fill the value of this box…

we add an ‘onclick’ catch to the btn to trigger the file input hidden field.


So we now get a browse box up to choose a file, in this case a pdf..

Once a file is chosen the input file receives a value, but is still hidden..
Using another jquery event ‘change’ we now use this to fill in the ‘pretend’ text field..


Basically , if input with id of pdffile changes we get ‘this’ value and put it in the the input field ‘subfile’

So we have a nicely styled input box that actually has no affect on the form at all.

In my next tutorial I am going to show you how to use html5 with an input box similar to above to resize an image client-side using canvas.
Please feel free to comment on this.