Source Code File Upload Drag and Drop dengan DropzoneJS dan PHP

Hallo sahabat unduhmaster.com, berikut 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.

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;

 

Baca juga :  Aplikasi Manajemen Nilai Mahasiswa Berbasis 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")."')");
    }
    
}
?>

 

Baca juga :  Source Code Aplikasi Pengolahan Kas dengan PHP MySql
Link Download : dropzone.js

Selamat Mencoba !

Check Also

Aplikasi Pegawai Berbasis CI dengan AdminLTE

Unduhmaster.com – Hallo sahabat kodingers, pada kesempatan kali ini saya akan berbagi source code yang …