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.


<link rel="stylesheet" type="text/css" href="css/dropzone.css" />
<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.


<div class="container">
<h2>Example: Drag and Drop File Upload using jQuery and PHP</h2>
<div class="file_upload">
<form action="file_upload.php" class="dropzone">
<div class="dz-message needsclick">
<strong>Drop files here or click to upload.</strong><br />
<span class="note needsclick">(This is just a demo. The selected files are <strong>not</strong> actually uploaded.)</span>
</div>
</form>
</div>
</div>

 

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: