When you nest the control inside a
<button>
, that button receives the click, and does not pass it on to the invisible file upload control.
Try nesting it inside a
<label>
instead:
Whipping File Inputs Into Shape with Bootstrap 3 · A Beautiful Site[
^]
<label class="btn btn-default btn-file">
Browse <input type="file" style="display: none;">
</label>
.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;
}
Alternatively, use a pre-built plugin - for example:
Bootstrap File Input[
^]