File upload button

by Donal Devine

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section>
  <div class="container p-5">
    <!-- For demo purpose -->
    <div class="row mb-5 text-center text-white">
      <div class="col-lg-10 mx-auto">
        <h1 class="display-4">File upload button </h1>
        <p class="lead">Build a simple file upload button using Bootstrap 4.</p>
      </div>
    </div>
    <!-- End -->


    <div class="row">
      <div class="col-lg-5 mx-auto">
        <div class="p-5 bg-white shadow rounded-lg"><img src="https://res.cloudinary.com/mhmd/image/upload/v1557366994/img_epm3iz.png" alt="" width="200" class="d-block mx-auto mb-4 rounded-pill">

          <!-- Default bootstrap file upload-->

          <h6 class="text-center mb-4 text-muted">
            You can use default Bootstrap file upload
          </h6>

          <div class="custom-file overflow-hidden rounded-pill mb-5">
            <input id="customFile" type="file" class="custom-file-input rounded-pill">
            <label for="customFile" class="custom-file-label rounded-pill">Choose file</label>
          </div>
          <!-- End -->

          <h6 class="text-center mb-4 text-muted">
            Or a custom button that launches file browser
          </h6>

          <!-- Custom bootstrap upload file-->
          <label for="fileUpload" class="file-upload btn btn-primary btn-block rounded-pill shadow"><i class="fa fa-upload mr-2"></i>Browse for file ...
                        <input id="fileUpload" type="file">
                    </label>
          <!-- End -->

        </div>
      </div>
    </div>
  </div>
</section>

CSS

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

.file-upload input[type='file'] {
  display: none;
}

/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/


.rounded-lg {
  border-radius: 1rem;
}

.custom-file-label.rounded-pill {
  border-radius: 50rem;
}

.custom-file-label.rounded-pill::after {
  border-radius: 0 50rem 50rem 0;
}