Drag And Drop File Upload with PHP and jQuery

Uploading files with a drag and drop feature is a user-friendly solution widely used on web Applications where the emphasis on usability is very high. Mostly we need to implement file uploading functionality by browsing the file directory through the click. But sometimes it is required to also handle file upload by drag and drop.

In this article, I will explain How to Implement drag and drop multiple file upload in PHP MySQL using jQuery. This is a very simple example, you can just copy-paste and change according to your requirement.

Also Read : Simple CRUD implementation with CodeIgniter, MySQL and AJAX

Before started to implement the Drag And Drop File Upload, look files structure:

upload-image-and-create-multiple-thumbnails-php
- assets
  - dist
  - css
    - style.css
  - js
    - custom.js
  - uploads
  - img
- templates
  - header.php
  - footer.php
- index.php
- DBConnection.php
- upload.php

Step 1: Create the database and Table

For this tutorial, you need a MySQL database with the following table:

	CREATE TABLE `uploads` (
	  `id` int(11) NOT NULL,
	  `file_name` varchar(255) NOT NULL,
	  `upload_time` varchar(255) NOT NULL
	) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

	ALTER TABLE `uploads`
  		ADD PRIMARY KEY (`id`);

	ALTER TABLE `uploads`
  		MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
	COMMIT;

CREATE TABLE `uploads` (

`id` int(11) NOT NULL,

`file_name` varchar(255) NOT NULL,

`upload_time` varchar(255) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `uploads`

ADD PRIMARY KEY (`id`);

ALTER TABLE `uploads`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

COMMIT;

Step 2: Database Connection class

Create a controller file named DBConnection.php

<?php
/**
 * @package DBConnection
 *
 * @author TechArise Team
 *
 * @email  info@techarise.com
 *   
 */
//DBConnection
$_dbHostname = "localhost";
$_dbUsername = "root";
$_dbPassword = "";
$_dbName = "demo_db";
$mysqli = mysqli_connect($_dbHostname, $_dbUsername, $_dbPassword, $_dbName) or die("Connection failed: " . mysqli_connect_error());
// Check connection
if ($mysqli -> connect_errno) {
  echo "Failed to connect to MySQL: " . $mysqli -> connect_error;
  exit();
}
?>

<?php

/**

* @package DBConnection

* @author TechArise Team

* @email info@techarise.com

//DBConnection

$_dbHostname = "localhost";

$_dbUsername = "root";

$_dbPassword = "";

$_dbName = "demo_db";

$mysqli = mysqli_connect($_dbHostname, $_dbUsername, $_dbPassword, $_dbName) or die("Connection failed: " . mysqli_connect_error());

// Check connection

if ($mysqli -> connect_errno) {

echo "Failed to connect to MySQL: " . $mysqli -> connect_error;

exit();

}

Step 3: Include Dropzone Plugin Files

We have used Dropzone jQuery plugin for drag and drop file upload, include plugin files.

<link rel="stylesheet" type="text/css" href="assets/js/dropzone/dropzone.css" />
<script type="text/javascript" src="assets/js/dropzone/dropzone.js"></script>

1 2	<link rel="stylesheet" type="text/css" href="assets/js/dropzone/dropzone.css" /> <script type="text/javascript" src="assets/js/dropzone/dropzone.js"></script>

Step 4: Create action file named upload.php

<?php 
include_once("DBConnection.php");
if(!empty($_FILES)){     
    $uploadDir = "assets/uploads/";
    $fileName = $_FILES['file']['name'];
    $uploadedFile = $uploadDir.time().'-'.$fileName;    
    if(move_uploaded_file($_FILES['file']['tmp_name'],$uploadedFile)) {
        $sql = "INSERT INTO uploads (file_name, upload_time)VALUES('".$fileName."','".date("Y-m-d H:i:s")."')";
		mysqli_query($mysqli, $sql);
        echo json_encode(array("status"=>1));
    } else {
        echo json_encode(array("status"=>0));
    }
}
?>

<?php

include_once("DBConnection.php");

if(!empty($_FILES)){

$uploadDir = "assets/uploads/";

$fileName = $_FILES['file']['name'];

$uploadedFile = $uploadDir.time().'-'.$fileName;

if(move_uploaded_file($_FILES['file']['tmp_name'],$uploadedFile)) {

$sql = "INSERT INTO uploads (file_name, upload_time)VALUES('".$fileName."','".date("Y-m-d H:i:s")."')";

mysqli_query($mysqli, $sql);

echo json_encode(array("status"=>1));

} else {

echo json_encode(array("status"=>0));

}

Step 5: Create HTML file named index.php

We will create HTML file with drag and drop form.

<?php 
include_once("DBConnection.php");
if(!empty($_FILES)){     
    $uploadDir = "assets/uploads/";
    $fileName = $_FILES['file']['name'];
    $uploadedFile = $uploadDir.time().'-'.$fileName;    
    if(move_uploaded_file($_FILES['file']['tmp_name'],$uploadedFile)) {
        $sql = "INSERT INTO uploads (file_name, upload_time)VALUES('".$fileName."','".date("Y-m-d H:i:s")."')";
		mysqli_query($mysqli, $sql);
        echo json_encode(array("status"=>1));
    } else {
        echo json_encode(array("status"=>0));
    }
}
?>

<?php

include_once("DBConnection.php");

if(!empty($_FILES)){

$uploadDir = "assets/uploads/";

$fileName = $_FILES['file']['name'];

$uploadedFile = $uploadDir.time().'-'.$fileName;

if(move_uploaded_file($_FILES['file']['tmp_name'],$uploadedFile)) {

$sql = "INSERT INTO uploads (file_name, upload_time)VALUES('".$fileName."','".date("Y-m-d H:i:s")."')";

mysqli_query($mysqli, $sql);

echo json_encode(array("status"=>1));

} else {

echo json_encode(array("status"=>0));

}

Step 6: Create JavaScript file named custom.js

We will handle AJAX request

	jQuery(document).ready(function(){
		jQuery(".dropzone").dropzone({
		  url: 'upload.php',
		  width: 300,
		  height: 300, 
		  progressBarWidth: '100%',
		  maxFileSize: '10MB'
		})
	});

jQuery(document).ready(function(){

jQuery(".dropzone").dropzone({

url: 'upload.php',

width: 300,

height: 300,

progressBarWidth: '100%',

maxFileSize: '10MB'

})

});

Create files named (header.php and footer.php)

This file contains the header and footer section of the webpage. The Bootstrap library is used to provide a better UI, so, include it in the header and footer section.

header.php

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Team TechArise">
    <meta name="generator" content="TechArise 0.84.0">
    <title>Drag And Drop File Upload with PHP MySQL and jQuery | TechArise</title>
    <link rel="canonical" href="https://techarise.com">
    <link rel="icon" type="image/ico" href="https://techarise.com/wp-content/themes/v1/favicon.ico">
    <!-- Bootstrap core CSS -->
	  <link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/js/dropzone/dropzone.css" rel="stylesheet">
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="assets/css/style.css" rel="stylesheet">
  </head>
  <body>
  <div class="container py-3">
    <header>
      <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
        <a href="https//techarise.com" class="d-flex align-items-center text-dark text-decoration-none">
          <span class="fs-4">TechArise</span>
        </a>
        <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
          <a class="me-3 py-2 text-dark text-decoration-none" href="https//techarise.com">Home</a>
          <a class="me-3 py-2 text-dark text-decoration-none" href="https://techarise.com/php-free-script-demos">Live Demos</a>
          <a class="me-3 py-2 text-dark text-decoration-none" href="https://techarise.com/contact-us">Contact</a>
          <a class="py-2 text-dark text-decoration-none" href="https://techarise.com/about-us">About</a>
        </nav>
      </div>
    </header>

<!doctype html>

<head>

<title>Drag And Drop File Upload with PHP MySQL and jQuery | TechArise</title>

<style>

.bd-placeholder-img {

font-size: 1.125rem;

text-anchor: middle;

-webkit-user-select: none;

-moz-user-select: none;

user-select: none;

}

@media (min-width: 768px) {

.bd-placeholder-img-lg {

font-size: 3.5rem;

}

</style>

</head>

<body>

<span class="fs-4">TechArise</span>

</a>

<a class="me-3 py-2 text-dark text-decoration-none" href="https://techarise.com/php-free-script-demos">Live Demos</a>

<a class="me-3 py-2 text-dark text-decoration-none" href="https://techarise.com/contact-us">Contact</a>

<a class="py-2 text-dark text-decoration-none" href="https://techarise.com/about-us">About</a>

</nav>

</div>

</header>

footer.php

<footer class="pt-4 my-md-5 pt-md-5 border-top">
    <div class="row">
      <div class="col-12 col-md">
        <small class="d-block mb-3 text-muted"><a href="https//techarise.com">Copyright &copy; 2011 - <?php print date('Y', time());?> TECHARISE.COM All rights reserved.</a></small> 
      </div>
    </div>
  </footer>
</div>
<script src="assets/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script> 
<script src="assets/js/dropzone/dropzone.js"></script>
<script type="text/javascript">
  Dropzone.autoDiscover = false;
</script>
<script src="assets/js/custom.js"></script>
</body>
</html>

</div>

</footer>

</div>

Dropzone.autoDiscover = false;

</script>

</body>

</html>

Also Read : CodeIgniter CRUD Operations with MySQL

Demo Download