Drag and Drop File Upload using jQuery and PHP

File upload is a common functionality that’s needed to implement in most of web projects. Mostly we need to implement file uploading functionality by browsing file directory through click. But sometimes it is required to also handle file upload by drag and drop.

So if you’re looking for tutorial to implement drag and drop multiple file upload in your project, you’re here at right place. In this tutorial, we will learn how to implement drag and drop multiple file upload using jQuery and PHP.

Also, read:

• Image Upload and Crop in Modal with PHP and jQuery
• Upload Multiple Images using jQuery, PHP & MySQL
• Reduce or Compress Image Size While Uploading in PHP
• Image Upload without Page Refresh with PHP and jQuery
• Amazon S3 File Upload using PHP
• Angular Multiple File Upload with PHP and MySQL
• Create Thumbnails While Uploading Images with PHP & jQuery
• Amazon S3 File Upload using JavaScript

Here we have used DropzoneJS jQuery plugin to handle drag and drop file upload. We have also used PHP to upload the files on server and insert file details in MySQL database table.

So let’s start coding. Before begin, take a look at major files used for this tutorial and demo.

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

Step1: Create Database Table
In this tutorial we will insert uploaded files details into MySQL Database. So we need to create MySQL database table to store files details. Here we will create uploads table to store uploaded files details.

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

Step2: Create Database Connection
After creating MySQL database table, we will create db_connect.php file to make connection with MySQL database.

<?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 = "uploads/";
    $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 uploads (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));
    }    
}
?>

You may also like:

• Star Rating System with Ajax, PHP and MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Your Own CAPTCHA Script with PHP
• Convert Unix Timestamp To Readable Date Time in PHP
• Inventory Management System with Ajax, PHP & MySQL
• Create Live Editable Table with jQuery, PHP and MySQL
• Live Add Edit Delete datatables Records with Ajax, PHP and MySQL
• Stripe Payment Gateway Integration in PHP
• Export Data to Excel with PHP and MySQL
• Star Rating System with Ajax, PHP and MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• How To Create Simple REST API in PHP

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download