Bootstrap by Twitter - File Input Box

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.



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:



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…
File Picker

The div class=”input-append” will attach a button to the input field to make it look nice.
we add an ‘onclick’ catch to the btn to trigger the file input hidden field.
onclick=”$(‘#pdffile’).click();”

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..

$('#pdffile').change(function(){
     $('#subfile').val($(this).val());
});

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..

View Demo

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..

Copyright 2007 - 2024 southcoastweb is a brand of DSM Design.