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

 

 

 

Drop files here or click to upload.
(This is just a demo. The selected files are not actually uploaded.)

 

 

 

 

 

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.

Related Posts: