File input box styling with Bootstrap Form Elements and Jquery
South Coast Web Design Ltd
Bootstrap by Twitter – File Input Box Feb 24

Bootstrap By Twitter
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:
Input X Large

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" />

 

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

17 Responses to “Bootstrap by Twitter – File Input Box”

Cem Ibrahim ARIOctober 12th, 2013 at 1:07 am

This snippet really saved my day. Thank you for your work. its very usefull when still using base bootstrap 2 framework, ofcourse can be applied to any other css/jquery projects i guess. Thanks again

southcoastwebOctober 12th, 2013 at 7:49 am

Just a quick update :

the line:

<input type="file" name="file" style="display:none;" id="pdffile" />

causes a few issues on older versions of safari on osx10.5 and lower so i have found out.
To overcome this issue use : visibility:hidden; instead.
I have updated the demo and tested on older versions and its all good.

AmeyaOctober 21st, 2013 at 7:43 am

Minor typo in the script.

// This bit of jquery will show the actual file input box
$(‘#showHidden’).click(function(){
$(‘#pdffile’).css(‘visibilty’,’visible’); // visibility is misspelled.
});

RichardJanuary 22nd, 2014 at 2:24 pm

Hi Thaks for this useful tip. I had slight issues with the display of the selected file name, in the “pdffile” field: It didnt show at all in IE,& other browsers injected a false pathname: I got round that as follows :
1) Write a javascript function : to get the filename from the path.

function setFileInputFunction(source, target) {
var x = $(source).val();
var z = x.split(“\\”).pop();
$(target).val(z);
}

2) calling this in the onchange event in the html :

Pirthous JakkiriaApril 9th, 2015 at 10:57 am

I used by this way to make more than one file upload in same page.
HTML:
Browse File

SCRIPT:
$(“.btn-file a”).on(“click”,function(){ $(this).parent().find(‘input[type=file]’).trigger(“click”); });
$(“.btn-file input[type=file]”).on(“change”,function(){
$(this).parent().find(‘input[type=text]’).val($(this).val());
});

Leave a Response


Top