Upload file Drag and Drop dengan PHP DropzoneJS

1
Upload file Drag and Drop dengan PHP DropzoneJS

Menggunakan DropzoneJS dan PHP kita dapat menerapkan upload file drag and drop dengan mudah di aplikasi web. DropzoneJS adalah library open source yang menyediakan file upload drag’n’drop dengan preview gambar. Ini ringan, tidak tergantung pada library lainnya (seperti jQuery). DropzoneJS tidak menangani upload file ke server. Jadi, kita akan menggunakan PHP untuk upload file ke server dan MySQL digunakan untuk memasukkan informasi file pada database.

Kamu hanya butuh dua file Dropzone library dropzone.js dan dropzone.css. Kamu dapat men-download kedua file tersebut dari situs DropzoneJS. Kamu juga bisa mendapatkan file-file tersebut di dalam source code dari link bawah.

  • Buat folder css/ dan masukkan file dropzone.css ke dalamnya.
  • Buat folder js/ dan masukkan file dropzone.js ke dalamnya.
  • Buat folder upload/ untuk menyimpan file yang diupload.
  • Buat file index.html untuk form uploadnya.
  • Buat file upload.php untuk menangani upload file server-side dan menyimpan informasi file ke database.

Membuat table database

Jika kamu ingin menyimpan informasi filenya (misal: nama file), buat tabel ke dalam database. Untuk pengujian, saya membuat tabel file untuk menyimpan nama file yang diupload.

CREATE TABLE `file` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `nama_file` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
    `diupload` datetime NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

index.html

Masukkan library Dropzone.

<!-- Memasukkan Dropzone -->
<link rel="stylesheet" type="text/css" href="css/dropzone.css" />
<script type="text/javascript" src="js/dropzone.js"></script>

Kamu hanya perlu membuka tag form dan menutup tag form tanpa elemen form yang lain. Untuk tag <form> perlu atribut action dan class. Atribut action mendefinisikan tindakan untuk meng-upload server-side. class dropzone adalah identifier library Dropzone.

<div class="image_upload_div">
    <form action="upload.php" class="dropzone">
    </form>
</div>

upload.php

File ini digunakan untuk meng-upload server-side dan memasukkan informasi file ke dalam database.

<?php
if(!empty($_FILES)){
 
 //konfigurasi database
 $dbHost = 'localhost';
 $dbUsername = 'root';
 $dbPassword = '';
 $dbName = 'codingan';
 //menghubungkan ke database
 $conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
 if($mysqli->connect_errno){
  echo "Gagal terhubung ke MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
 }
 
 $targetDir = "upload/";
 $namaFile = $_FILES['file']['name'];
 $targetFile = $targetDir.$namaFile;
 if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
  //memasukkan informasi file ke dalam database
  $conn->query("INSERT INTO file (nama_file, diupload) VALUES('".$namaFile."','".date("Y-m-d H:i:s")."')");
 }
 
}
?>

Cukup itu saja, jika mengalami kesulitan silahkan berkomentar.

BAGIKAN
Subscribe
Beritahu
guest

1 Comment
terlama
terbaru vote teratas
Inline Feedbacks
View all comments
dinar
dinar
Oktober 8, 2020 18:50

gimana cara meng input nya jika ada data lainnya misal nama barang dan upload barang ada dua field