Tutorial Custom File Uploding Bootstrap 4
Software Engineering Enthusiast | Blogger | Creator of RubyPedia.com
19 Mei 2018

Bootstrap adalah sebuah css framework yang dibangun untuk mempermudah developer khususnya front-end developer dalam mendesign sebuah tampilan web. Dengan bootstrap kita tidak perlu membuat style css dari awal, karena sudah ada fungsi-fungsi yang siap digunakan dengan dukungan dokumentasi yang mudah dan lengkap.

Pada tutorial kali ini kita akan mencoba mencustom salah satu komponen dari bootstrap, khususnya bootstrap 4, yaitu file uploading, secara bawaan tampilan dari komponen file uploding di bootstrap seperti gambar berikut ini:


Dan pada tutorial kali ini kita mencoba mencustomnya menjadi seperti gambar berikut ini:


Langsung saja, ada 3 file dalam membuat custom file uploading, yaitu:

  • index.html
  • style.css
  • app.js

NOTE: resources bootstrap diambil dari CDN (Content Delivery Network) / diambil dari online.

Pertama buat folder project baru / folder baru di htdocs(jika menggunakan xampp), beri nama misalkan, bootstrap-uploading, kemudian buatlah 3 file didalam folder tersebut, yaitu index.html, style.css, app.js

Buka file index.html, kemudian masukkan kode berikut ini:

<!DOCTYPE html>
<html>
<head>
    <title>Custom File Uploading Bootstrap 4</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

</head>
<body>

<div class="container p-y-1">
  <div class="row m-b-1">
    <div class="col-sm-6 offset-sm-3">
      <button type="button" class="btn btn-primary btn-block" onclick="document.getElementById('inputFile').click()">Add Image</button>
      <div class="form-group inputDnD">
        <label class="sr-only" for="inputFile">File Upload</label>
        <input type="file" class="form-control-file text-primary font-weight-bold" id="inputFile" accept="image/*" onchange="readUrl(this)" data-title="Drag and drop a file">
      </div>
    </div>
  </div>
   <div class="row m-b-1">
    <div class="col-sm-6 offset-sm-3">
      <button type="button" class="btn btn-success btn-block" onclick="document.getElementById('inputFile').click()">Add Image</button>
      <div class="form-group inputDnD">
        <label class="sr-only" for="inputFile">File Upload</label>
        <input type="file" class="form-control-file text-success font-weight-bold" id="inputFile" accept="image/*" onchange="readUrl(this)" data-title="Drag and drop a file">
      </div>
    </div>
  </div>
    <div class="row m-b-1">
    <div class="col-sm-6 offset-sm-3">
      <button type="button" class="btn btn-warning btn-block" onclick="document.getElementById('inputFile').click()">Add Image</button>
      <div class="form-group inputDnD">
        <label class="sr-only" for="inputFile">File Upload</label>
        <input type="file" class="form-control-file text-warning font-weight-bold" id="inputFile" accept="image/*" onchange="readUrl(this)" data-title="Drag and drop a file">
      </div>
    </div>
  </div>
    <div class="row m-b-1">
    <div class="col-sm-6 offset-sm-3">
      <button type="button" class="btn btn-danger btn-block" onclick="document.getElementById('inputFile').click()">Add Image</button>
      <div class="form-group inputDnD">
        <label class="sr-only" for="inputFile">File Upload</label>
        <input type="file" class="form-control-file text-danger font-weight-bold" id="inputFile" accept="image/*" onchange="readUrl(this)" data-title="Drag and drop a file">
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

Selanjutnya buka file style.css, kemudian masukkan kode berikut ini:

.inputDnD .form-control-file {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 6em;
  outline: none;
  visibility: hidden;
  cursor: pointer;
  background-color: #c61c23;
  box-shadow: 0 0 5px solid currentColor;
}
.inputDnD .form-control-file:before {
  content: attr(data-title);
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 100%;
  min-height: 6em;
  line-height: 2em;
  padding-top: 1.5em;
  opacity: 1;
  visibility: visible;
  text-align: center;
  border: 0.25em dashed currentColor;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
}
.inputDnD .form-control-file:hover:before {
  border-style: solid;
  box-shadow: inset 0px 0px 0px 0.25em currentColor;
}

body {
  background-color: #f7f7f9;
}

Selanjutnya buka file app.js, kemudian masukkan kode berikut ini:

function readUrl(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      var imgData = e.target.result;
      var imgName = input.files[0].name;
      input.setAttribute("data-title", imgName);
      console.log(e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

Silahkan lihat project dengan mengetikkan di address bar browser http://localhost/nama-folder

Blog ini telah dibaca sebanyak 515 kali
Bootstrap Bootstrap4 Custom Bootstrap File Uploading Custom File Uploading

Sekilas Tentang Penulis

Fika Ridaul Maulayya
Software Engineering Enthusiast | Blogger | Creator of RubyPedia.com

KOMENTAR

blog comments powered by Disqus