Cara Ubah Input File Jadi Drag and Drop

By /

Berikut ini adalah hasil dari Output yang akan dibuat :

Untuk membuat fungsi seperti gambar di atas, kamu bisa ikuti code di bawah ini :

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Penggunaan Dropify</title>
  <!-- Load Dropify CSS -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css">
</head>
<body>
  <h1>Contoh Penggunaan Dropify</h1>

  <!-- Input file dengan Dropify -->
  <input type="file" class="dropify" data-height="200">

  <!-- Load jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Load Dropify JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>

  <script>
    $(document).ready(function() {
      // Jalankan Function Dropify
      $('.dropify').dropify();
    });
  </script>
</body>
</html>

Di dalam tag <head> pertama kali load dahulu css dari dropify

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css">

Pada tag <body> pertama, masukan input file, dan jangan lupa tambahkan class “dropify” 

<input type="file" class="dropify" data-height="200">

Selanjutnya load library Jquery dan Dropify

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>

Setelah load librarynya, jalankan fungsi dari dropify, dan jangan lupa untuk mengarahkan fungsi tersebut ke class “dropify” yang tadi dibuat

<script>
    $(document).ready(function() {
      // Jalankan Function Dropify
      $('.dropify').dropify();
    });
  </script>
Scroll to Top