Twitter Bootstrap is great, but there are places where it just stops short. One of those is the file input field, where the guys at bootstrap (and probably rightfully so) – just
left it as the browser default.
The problem is – it makes your pretty bootstrap forms ugly.
No worries – the following can help:
Ninja edit: Look at the comments – there are some browser specific enhancements.
Ninja edit 2: Look at jasny’s fork for file-upload integrated into bootsrap and many more goodies!!
So this is quite easy:
- Define a normal, hidden file input field, and a visible bootstrap-styled field that looks pretty.
- Attach an onclick to the pretty input, that makes it click the hidden one.
- When the pretty Browse button is clicked – it sends a click to the real file input. This will in turn pop up the file selection dialog.
- After the user selects a file, the hidden file input’s change() event is called. This will copy the value of the real (hidden) file
input to the pretty one. We do this to mimic the behaviour of file input fields – that they show you the file name after it is selected.