Twitter Bootstrap Form File Element Upload Button

Twitter Bootstrap Form File Element Upload Button

Here's a solution for Bootstrap 3, 4, and 5.

To make a functional file input control that looks like a button, you only need HTML:

HTML

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

This works in all modern browsers, including IE9+. If you need support for old IE as well, please use the legacy approach shown below.

This techniques relies on the HTML5 hidden attribute. Bootstrap 4 uses the following CSS to shim this feature in unsupportive browsers. You may need to add if you're using Bootstrap 3.

[hidden] {
  display: none !important;
}

---

Legacy approach for old IE

If you need support for IE8 and below, use the following HTML/CSS:

HTML

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

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

Note that old IE doesn't trigger the file input when you click on a <label>, so the The CSS "bloat" does a couple things to work around that:

• Makes the file input span the full width/height of the surrounding <span>
• Makes the file input invisible

---

Feedback & Additional Reading

I've posted more details about this method, as well as examples for how to show the user which/how many files are selected:

https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

Bootstrap form: Custom file button working but not showing name of uploaded file

If I'm not mistaken, if you want to custom that "No file" message you need to change it after the file upload using JS, Angular, etc. because that said text dosen't know when to change.

something like this will do the trick:

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

Here some links to help you out:

https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_form_custom_file&stacked=h

Bootstrap file upload button not working within background-image

The button isn't clickable because of the negatvie z-index of #hero. the z-index has no effect anyway in this szenario so i removed it and it works:

https://jsfiddle.net/967h3ty2/

To have a "total files attached" at the center of the screen you need to count the uploaded files on the server side using php or a similar technology.

---

Related Topics