Steps to Implement Drag and Drop File Uploading Function Using PHP and jQuery

Drag and Drop File Upload using jQuery and PHP

File upload is common functionality that every business and non-business web application required somehow to manage the products and services by uploading the images, videos, or content of the web. Most of the file uploading functionality works by browsing the file directory through a click. The simple drag and drop file uploading functionality is a necessity for all web page managers to easily and fastly upload the files. In this tutorial, we will learn how to execute a drag and drop multiple file upload functionality using jQuery and PHP. Here we have used the DropzoneJS jQuery plugin to manage drag and drop file upload. And we have also used PHP to upload the files on the server and insert file details in the MySQL database table.

Following are the major files used for this Drag and drop file upload functionality implementation

index.php
file_upload.php
dropzone.js
dropzone.css

Step-1: Create a Database Table

In this drag and drop functionality building process, we uploaded file details into MySQL Database. So we will create a MySQL database table to store the details of the file. Here, we will create a table “Cyblance” to store the uploaded file details.


CREATE TABLE IF NOT EXISTS `Cyblance` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`file_name` varchar(255) NOT NULL,
`upload_time` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB;

Step -2: Create Database Connection

After creating the MySQL database table(Cyblance), We are connecting with the MySQL database by creating the db_connect.php file.


<!--?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "demos"; $conn = mysqli_connect($servername, $username, $password, $dbname); ?-->

Step3: Include Dropzone Plugin Files

As we have used the Dropzone jQuery plugin for drag and drop file upload, so we need to include plugin files.



<script type="text/javascript" src="js/dropzone.js"></script>

Step4: Create File Upload Form HTML

Now in the index.php file, we will create a file upload from Form HTML. We need only form opening and closing tags without any form elements. We just need action and class attributes in the form tag. The action attribute used to perform server-side file upload. The dropzone class is the identifier of the Dropzone library.

Example: Drag and Drop File Upload using jQuery and PHP

Step5: Upload Files on Server

Finally, in the file_upload.php file, we will handle file upload on the server and insert file details into the MySQL database table.


<!--?php include_once("db_connect.php"); if(!empty($_FILES)){ $upload_dir = "Cyblance/"; $fileName = $_FILES['file']['name']; $uploaded_file = $upload_dir.$fileName; if(move_uploaded_file($_FILES['file']['tmp_name'],$uploaded_file)){ //insert file information into db table $mysql_insert = "INSERT INTO Cybalnce(file_name, upload_time)VALUES('".$fileName."','".date("Y-m-d H:i:s")."')"; mysqli_query($conn, $mysql_insert) or die("database error:". mysqli_error($conn)); } } ?-->

Now, We can view the live functionality for uploading files using drag and drop functionality.

Web Design Trends to Lookout for in 2021 by Admin January 19, 2021 With the onset of each year, we come to see…