There are many, many, many ways to hack a file input so it looks and behaves consistently across all browsers. There’s even a pretty slick plugin to help get the job done. Unfortunately, most of these solutions are cumbersome, prone to cross-browser issues, and require JavaScript. Today, we would like to propose a more fundamental approach for file inputs in Bootstrap.

Back to the basics

Let’s start by making a fake button with a nested file input:

<span class="btn btn-default btn-file">
    Browse <input type="file">
</span>

And then apply some CSS:

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

So far so good. Not only will the “button” trigger the file input, but it will also acquire the :hover and :active pseudo classes so it behaves like a real button.

You can use these buttons like you normally would…by themselves, in a button group, or even in an input group.

Providing feedback

Now with the hard part out of the way, it’s a good practice to provide users with a bit of feedback about their selection. A touch of jQuery magic will keep an eye on your file inputs and fire an event called fileselect when a file is chosen:

$(document).on('change', '.btn-file :file', function() {
    var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [numFiles, label]);
});

Here’s an example to demonstrate the event:

$(document).ready( function() {
    $('.btn-file :file').on('fileselect', function(event, numFiles, label) {
        console.log(numFiles);
        console.log(label);
    });
});

You can use the numFiles or label parameter to show users the name of the file that was selected and, if applicable, how many. Alternatively, you could elect to use the standard change event and handle the label yourself.

This method was tested to work in IE8–IE11 and recent versions of Chrome, Safari, Firefox, and Opera.

See it in action