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
- Upload and display image from database using PHP Mysql oops c`oncept.
- How to upload file in database using Cakephp framework
- Upload File without using Form Submit button in jQuery AJAX PHP MySQL
- Ajax Multiple Image Upload with Edit Update Delete using PHP Mysql
- Upload Multiple Image in Database & Retrieve using jquery AJAX in PHP MYSQL
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
Thank you for your tutorial. It works perfectly, but when I extend the query to include other form inputs it doesn’t work anymore. Do you have some tips?
Thank you!