Drag and drop is a very effective function for creating user friendly web applications. In general, this feature allows you to drag items and drop them elsewhere on the web page. The drag and drop function can be used in web applications for various purposes. If you want to make the file upload feature more interactive, then drag and drop is the best option.
DropzoneJS is an open source JavaScript library that can be used to download HTML elements. This means that the user can drag files from the computer and drop them into this HTML element. DropzoneJS offers an easy way to integrate the upload of multiple preview files into the web application using drag and drop. Dropzone is lightweight and doesn’t depend on other jQuery libraries.
DropzoneJS does not take the function of uploading files, but sends files to the server via AJAX. You need to use PHP to upload files to the server. In this tutorial, we will show you how to integrate drag-and-drop file upload with DropzoneJS and PHP.
The sample code allows you to upload multiple images or files to the server without refreshing the page using Dropzone and PHP. The following steps are taken to implement the drag and drop file upload feature.
See Also
1. How to Upload & Display Image Using jQuery AJAX PHP and MySQL
2. How to Upload File in CakePHP 4
3. Ajax Multiple Image Upload with Edit Update Delete using PHP Mysql
4. Upload Multiple Image in Database & Retrieve using jquery AJAX in PHP MYSQL
5. How to Upload Multiple Images using jquery ajax in PHP MYSQL
6. Upload File without using Form Submit button in jQuery AJAX PHP MySQL
Table of Contents
Create Database Table
-- Database: `webscodex` -- -------------------------------------------------------- -- Table structure for table `files` -- CREATE TABLE `files` ( `id` int(11) NOT NULL, `file_name` varchar(100) NOT NULL, `created` datetime NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Create Database Configuration
<?php // Database configuration $dbHost = "localhost"; $dbUsername = "root"; $dbPassword = ""; $dbName = "webscodex"; // Create database connection $con = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); // Check connection if ($con->connect_error) { die("Connection failed: " . $con->connect_error); } ?>
Create File (index.php) to Drag and Drop Files Upload
<!DOCTYPE html> <html lang="en"> <head> <title>Drag and Drop upload file using Dropzone JS with PHP & Mysqli</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="dropzone/dropzone.min.css"> </head> <body> <div class="card text-center" style="padding:20px;"> <h3>Drag and Drop upload file using Dropzone JS with PHP & Mysqli</h3> </div><br> <div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <div id="message"></div> <form action="upload.php" class="dropzone"></form><br> <button class="btn btn-success" style="float: right;" id="uploadBtn">Upload</button> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript" src="dropzone/dropzone.min.js"></script> <script type="text/javascript"> //Disabling autoDiscover Dropzone.autoDiscover = false; $(function() { //Dropzone class var myDropzone = new Dropzone(".dropzone", { url: "upload.php", paramName: "file", parallelUploads:3, uploadMultiple:true, acceptedFiles: '.png,.jpeg,.jpg', autoProcessQueue: false, success:function(file, response){ if (response == "true") { $("#message").append("<div class='alert alert-success'>Files Uploaded successfully</div>"); } else { $("#message").append("<div class='alert alert-danger'>Files can not uploaded</div>"); } } }); $('#uploadBtn').click(function(){ myDropzone.processQueue(); }); }); </script> </body> </html>
Create File (upload.php) to Upload Files to the Server using AJAX with PHP Mysql
- Receive upload file data using PHP $_FILES method.
- Upload files to the Server using move_uploaded_file function in PHP.
- Insert the uploaded file to the Database table
<?php // Include the database configuration file include_once 'dbConfig.php'; if (!empty($_FILES['file']['name'])) { $file_name = ""; $totalFile = count($_FILES['file']['name']); for ($i=0; $i < $totalFile ; $i++) { $fileName = $_FILES['file']['name'][$i]; $extension = pathinfo($fileName, PATHINFO_EXTENSION); $allowExtn = array('png', 'jpeg', 'jpg'); if (in_array($extension, $allowExtn)) { $newName = rand() . ".". $extension; $uploadFilePath = "uploads/".$newName; move_uploaded_file($_FILES['file']['tmp_name'][$i], $uploadFilePath); $file_name .= $newName ." , "; } } //Insert file information in the database $query = "INSERT INTO files (file_name, created) VALUES ('$file_name', NOW())"; if ($con->query($query)) { echo "true"; }else{ echo "false"; } } ?>