Hallo Kawan, kali ini akan kami bagikan source code File Upload Drag and Drop dengan DropzoneJS dan PHP. Source code ini digunakan untuk mempermudah kalian saat akan melakukan upload file dengan mudah dan cepat (sesuai koneksi). Source code ini cukup sederhana namun dapat bekerja dengan baik.
Beberapa dari kalian, sebagai developer mungkin memiliki metode masing-masing untuk melakukan file upload, ada yang menggunakan ajax atau cara lain yang lebih sederhana. Jika kalian bosan dengan cara lama itu, kalian bisa menggunakan ini untuk metode baru dalam melakukan upload file.
Berikut ini metode yang saya gunakan:
1. Buat tiga buah folder
- Folder yang pertama adalah folder js yang mana file dropzone.js akan disimpan pada folder itu,
- Folder yang kedua adalah folder css, seperti js. dropszone.css juga disimpan di folder css.
- Dan yang ketiga adalah folder uploads/ yang berfungsi untuk menyimpan file-file yang diupload.
- Folder yang kedua adalah folder css, seperti js. dropszone.css juga disimpan di folder css.
- Dan yang ketiga adalah folder uploads/ yang berfungsi untuk menyimpan file-file yang diupload.
2. Buat database dengan nama upload_draganddrop, lalu buat table files seperti dibawah ini
CREATE TABLE `files` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`uploaded` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
3. Buat code html nya di “index.html”, yang berisi code menyisipkan dropzone.js dan dropzone.css dan juga form untuk upload nya
<!DOCTYPE html>
<html>
<head>
<title>upload file drag and drop dengan dropzone.js dan php</title>
<link rel="stylesheet" type="text/css" href="css/dropzone.css" />
<script type="text/javascript" src="js/dropzone.js"></script>
</head>
<body>
<div class="image_upload_div">
<form action="upload.php" class="dropzone">
</form>
</div>
</body>
</html>
4. Terakhir, Setelah itu buat file “upload.php” untuk memproses file yang diupload
<?php
if(!empty($_FILES)){
//database configuration
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'upload_draganddrop';
//connect with the database
$conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if($mysqli->connect_errno){
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
$targetDir = "uploads/";
$fileName = $_FILES['file']['name'];
$targetFile = $targetDir.$fileName;
if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
//insert file information into db table
$conn->query("INSERT INTO files (file_name, uploaded) VALUES('".$fileName."','".date("Y-m-d H:i:s")."')");
}
}
?><?php
if(!empty($_FILES)){
//database configuration
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'codexworld';
//connect with the database
$conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if($mysqli->connect_errno){
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
$targetDir = "uploads/";
$fileName = $_FILES['file']['name'];
$targetFile = $targetDir.$fileName;
if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
//insert file information into db table
$conn->query("INSERT INTO files (file_name, uploaded) VALUES('".$fileName."','".date("Y-m-d H:i:s")."')");
}
}
?>
Sekian Tutorial Kali ini, Jangan lupa dicoba yaa kawan š
No comments