Developers India 2019

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 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 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 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 files 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 files 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 MySQL database table(Cyblance), We are conecting with MySQL database by creating 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 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 index.php file, we will create file upload Form HTML. We need only form opening and closing tags without any form elements. We just need action and class attributes in form tag. The action attribute used to perform server-side file upload. The dropzone class is 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 file_upload.php file, we will handle file upload on server and insert file details into 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: