Membuat Drag and Drop File Upload

Membuat Drag and Drop File Upload

Membuat Drag and Drop File Upload
Membuat Drag and Drop File Upload

Hallo sahabat ruangcoder, artikel kali ini tentang Cara Membuat Drag and Drop File Upload, fungsi dari membuat fitur drag and drop file ini, seperti yang kalian lihat di thumbnail pada artikel kali ini, untuk upload image / gambar, file dll, sesuai kebutuhan kalian saat upload nantinya. untuk membuatnya juga begitu mudah, dari desain yang menggunakan bootstrap, dan untuk fungsi kita menggunakan library dari JavaScript yaitu, jQuery, karena ini hanya lah contoh dasar pembuatannya, untuk mengembangkan nya ada di diri kalian masing - masing ya, apalagi untuk penerapan di website kalian.

Membuat Desain dengan Bootstrap untuk fitur Image Upload and Preview. Pada dasarnya ada field untuk upload file, Kalian juga dapat drag  dan drop file gambar untuk memilih dan melihat pratinjau. Program ini untuk mengunggah gambar karena akan menampilkan preview gambar, Tetapi kaliandapat menggunakan program ini untuk mengunggah semua jenis file setelah beberapa modifikasi.

Nah jika kalian tertarik programnya seperti apa, kalian bisa melihat preview dibawah ini tentu dengan source code yang disediakan.




Membuat Drag and Drop File Upload

Pertama admin telah membuat tata letak menggunakan Bootstrap grid layout dan pre-build class dan nama ID. Di form field, admin telah menggunakan atribut khusus yang diperlukan untuk mengunggah file . Admin menggunakan perintah enctype = "multipart / form-data" dalam tag form. Dalam file HTML, admin telah membuat semua elemen seperti form upload, button, dan teks , dll yang didasarkan pada bootstrap. Juga di file HTML , admin telah menautkan file lain seperti CSS, JS, dan Bootstrap, tautan CDN Jquery.

Sekarang menggunakan CSS,untuk memiliki sedikit style pada elemen seperti batas putus - putus pada bidang, menempatkan teks, dll seperti yang kalian lihat di pratinjau. Ada lebih sedikit baris kode CSS karena program ini didasarkan pada bootstrap dan merupakan library HTML CSS JS . Menggunakan CSS untuk mengubah warna button upload dan margin dasar, padding.

Penanganan jQuery di sini merupakan fitur penting dari program. Ini menunjukkan preview gambar dengan lebar 200px setelah memilih gambar. Juga, ada fitur reset , setelah memilih gambar kalian dapat reset form untuk memulai kembali. drag and drop didasarkan pada library JS Bootstrap, kalian hanya perlu menggunakan beberapa nama class / ID yang sudah dibuat sebelumnya seperti dropzone, dragover, dll.

Kalian akan  mengerti setelah mendapatkan kode , saya tidak bisa menjelaskan semuanya secara tertulis. Untuk membuat program ini, kalian harus membuat 3 file. Pertama untuk HTML , kedua untuk CSS , dan ketiga untuk JavaScript . Ikuti langkah-langkah untuk membuat ini tanpa kesalahan.

Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.


<!DOCTYPE html>
<!-- Code By RuangCoder ( https://www.ruangcoder.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Drag and Drop Image Upload | RuangCoder.com</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<section>
  <form action="" method="POST" enctype="multipart/form-data">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label class="control-label">Upload File</label>
            <div class="preview-zone hidden">
              <div class="box box-solid">
                <div class="box-header with-border">
                  <div><b>Preview</b></div>
                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn-danger btn-xs remove-preview">
                      <i class="fa fa-times"></i> Reset The Field
                    </button>
                  </div>
                </div>
                <div class="box-body"></div>
              </div>
            </div>
            <div class="dropzone-wrapper">
              <div class="dropzone-desc">
                <i class="glyphicon glyphicon-download-alt"></i>
                <p>Choose an image file or drag it here.</p>
              </div>
              <input type="file" name="img_logo" class="dropzone">
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <button type="submit" class="btn btn-primary pull-right">Upload</button>
        </div>
      </div>
    </div>
  </form>
</section>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

Sekarang buat file CSS bernama style.css dan masukkan kode-kode ini di sini.

/* Code By RuangCoder ( https://www.ruangcoder.com ) */
.container {
  padding: 50px 10%;
}

.box {
  position: relative;
  background: #ffffff;
  width: 100%;
}

.box-header {
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
  border-bottom: 1px solid #f4f4f4;
  margin-bottom: 10px;
}

.box-tools {
  position: absolute;
  right: 10px;
  top: 5px;
}

.dropzone-wrapper {
  border: 2px dashed #91b0b3;
  color: #92b0b3;
  position: relative;
  height: 150px;
}

.dropzone-desc {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  width: 40%;
  top: 50px;
  font-size: 16px;
}

.dropzone,
.dropzone:focus {
  position: absolute;
  outline: none !important;
  width: 100%;
  height: 150px;
  cursor: pointer;
  opacity: 0;
}

.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
  background: #ecf0f5;
}

.preview-zone {
  text-align: center;
}

.preview-zone .box {
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
}

.btn-primary {
  background-color: crimson;
  border: 1px solid #212121;
}

Langkah terakhir, buat file JavaScript bernama function.js dan masukkan kodenya.

// Code By RuangCoder ( https://www.ruangcoder.com )
function readFile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      var htmlPreview =
        '<img width="200" src="' + e.target.result + '" />' +
        '<p>' + input.files[0].name + '</p>';
      var wrapperZone = $(input).parent();
      var previewZone = $(input).parent().parent().find('.preview-zone');
      var boxZone = $(input).parent().parent().find('.preview-zone').find('.box').find('.box-body');

      wrapperZone.removeClass('dragover');
      previewZone.removeClass('hidden');
      boxZone.empty();
      boxZone.append(htmlPreview);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

function reset(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}

$(".dropzone").change(function() {
  readFile(this);
});

$('.dropzone-wrapper').on('dragover', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).addClass('dragover');
});

$('.dropzone-wrapper').on('dragleave', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).removeClass('dragover');
});

$('.remove-preview').on('click', function() {
  var boxZone = $(this).parents('.preview-zone').find('.box-body');
  var previewZone = $(this).parents('.preview-zone');
  var dropzone = $(this).parents('.form-group').find('.dropzone');
  boxZone.empty();
  previewZone.addClass('hidden');
  reset(dropzone);
});

Nah sampai disini kalian telah berhasil Membuat Drag and Drop File Upload, mungkin artikel nya sampai disini saja, semoga bermanfaat buat kalian, dan terimakasih sudah berkunjung, jangan bosan - bosan untuk berkunjung.

Anda mungkin menyukai postingan ini