Bootstrap 4 Custom Browse Button

bootstrap-4-custom-browse-button.markdown

Bootstrap 4 Custom Browse Button

Customized Browse Button for Bootstrap 4

A Pen by Akash Kumar on CodePen.

License.

index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<h1>Bootstrap 4 Custom Browse Button</h1>
<div class="container">
  <div class="form-group">
    <input type="file" name="img[]" class="file">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1"><i class="fas fa-paperclip"></i></span>
      </div>
      <input type="text" class="form-control" disabled placeholder="Upload File" aria-label="Upload File" aria-describedby="basic-addon1">
      <div class="input-group-append">
        <button class="browse input-group-text btn btn-primary" id="basic-addon2"><i class="fas fa-search"></i>  Browse</button>
      </div>
    </div>
  </div>
</div>

script.js

$(document).on("click", ".browse", function() {
  var file = $(this)
    .parent()
    .parent()
    .parent()
    .find(".file");
  file.trigger("click");
});
$(document).on("change", ".file", function() {
  $(this)
    .parent()
    .find(".form-control")
    .val(
      $(this)
        .val()
        .replace(/C:\\fakepath\\/i, "")
    );
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>

style.css

.file {
  visibility: hidden;
  position: absolute;
}

/* 
 * Styles for demo only 
 */

body {
  background-color: #fff;
  margin: 50px;
}

.container {
  background-color: #fff;
  padding: 40px 80px;
  border-radius: 8px;
  box-shadow: 0px 0px 24.08px 3.92px rgba(0, 0, 0, 0.25);
}

h1 {
  color: #fff;
  font-size: 3rem;
  font-weight: 900;
  margin: 0 0 5rem 0;
  background: -webkit-linear-gradient(#fff, #999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.btn.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  outline: none;
  color: #fff;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />