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

Leave a Response

18 Responses

  • Castle
  • April 20th, 2013

Can you please give us demo for the result ?
i tried to do it but i couldn’t

Hi, I will try and get a working demo up in the next few days, please check back..

The Demo Is now Working, I have added it to the post..

  • Alberto
  • July 4th, 2013

Very useful! Thanks a lot!

Thanks a lot, it’s nice trick and works great 🙂

  • Tobias
  • July 17th, 2013

Thanks a Lot My Friend!
Works Very Well !

Yes, working for me too and were very important one for me. great!

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

Just a quick update :

the line:


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.

  • Ameya
  • October 21st, 2013

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.
});

cheers for spotting that.

  • Richard
  • January 22nd, 2014

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 :

[…] default File pickers display differently in each browser.  This is a pain.  This website suggested hiding the file picker, & then showing a button to invoke the hidden filepickers […]

Thanks for finally talking about >File input box styling with Bootstrap Form Elements and Jquery <Liked it!

  • satyajeet
  • August 19th, 2014

thanks its great!

  • Pirthous Jakkiria
  • April 9th, 2015

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());
});

  • johny
  • August 26th, 2015

So simple and so great solution for bootstrap omission 🙂
Tnx

  • Ruwan Pradeep
  • December 16th, 2015

Thank you So much for Your Help

  • Kote Kutalia
  • March 13th, 2017

Thanks for the post. However, the problem is that it writes C:\fakepath\[filename] instead of an actual path. https://davidwalsh.name/fakepath – this can be a fix for it.