Drag And Drop Upload File Using Dropzone JS With PHP & Mysqli

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

Table of Contents

Create Database Table

The database is required in the database to store uploaded file details. The following SQL generates a table with some basic fields in a MySQL database.

-- Database: `webscodex`
-- --------------------------------------------------------
-- Table structure for table `files`
--
CREATE TABLE `files` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREAMENT,
  `file_name` varchar(100) NOT NULL,
  `created` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Create Database Configuration

dbConfig.php

<?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

Dropzone JS library is used to integrate drag and drop functions. So, include the Dropzone JS library and the CSS library first.

index.php

<!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

Dropzone sends all dropped files to the server using the Ajax file (upload.php) to process the upload process.

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

updoad.php

<?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";
	}
}

?>

Output

Drag and Drop upload file using Dropzone JS with PHP & Mysqli

You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊