
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 filedropzone.css
ke dalamnya. - Buat folder
js/
dan masukkan filedropzone.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.
gimana cara meng input nya jika ada data lainnya misal nama barang dan upload barang ada dua field