Drag and Drop File Upload using DropzoneJS PHP + MySQL

To drag and drop file image upload using dropzone js in PHP + MySQL database. in this tutorial i am going to show you how to drag and drop file image upload with submit button in PHP + MySQL + Dropzone js. And as well as how to upload multiple file using dropzone js + PHP + MySQL

PHP + MySQL drag and drop file upload with free source code example; i will create a image table in database and then create drag and drop image file upload form. After that add dropzone js library in image file upload form with Bootstrap 4 library. And create file/image insert/save/store into database and directory using PHP + MySQL.

PHP + MySQL Drag and Drop File Upload using DropzoneJS

Follow the below steps to drag and drop single and multiple file image upload using dropzone js + bootstrap in PHP + MySQL:

Step 1 – Start Apache Web Server
Step 2 – Create PHP Project
Step 3 – Create Table and Database Connection File
Step 4 – Create Drag and Drop Image File Upload Html Form
Step 5 – Add Dropzone JS For Drap Drop File/Image
Step 6 – Store Image File into MySQL DB
Step 7 – Test This PHP App

Step 1 – Start Apache Web Server

Now, you need to start your apache web server. And as well as start Apache and mysql web server. You can see in the image below how to start apache and mysql server:

Step 2 – Create PHP Project

In step 2, navigate to your xampp/htdocs/ directory. And inside xampp/htdocs/ directory, create one folder. And you can name this folder anything.

Here, I will “demo” the name of this folder. Then open this folder in any text editor (i will use sublime text editor).

Recommended:-How to Update Data From Database in PHP

Step 3 – Create Table and Database Connection File

In step 3,, you need to create database and table. So run the following sql query to create database and table:

CREATE DATABASE my_db;


CREATE TABLE `images` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`file` VARCHAR(255) NULL DEFAULT NULL,
`type` VARCHAR(255) NULL DEFAULT NULL,
`size` VARCHAR(255) NULL DEFAULT NULL,
PRIMARY KEY (`id`)
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB
AUTO_INCREMENT=1;

Then create a php file that named mydb.php. Which is used to connect phpmyadmin mysql database to project folder(demo).

So, now create mydb.php file and add the below given code into your file:

<?php

    $hName='localhost'; // host name

    $uName='root';   // database user name

    $password='';   // database password

    $dbName = "my_db"; // database name

    $conn = mysqli_connect($hName,$uName,$password,"$dbName");

      if(!$conn){
          die('Could not Connect MySql Server:' .mysql_error());
      }
?>

Step 4 – Create Drag and Drop Image File Upload Html Form

In step 4, create a php file that named index.php. Which is used to display drag and drop image file upload form. Using this form, you can insert image file database into MySQL database in PHP:

<!DOCTYPE html>
<html>
<head>
  <title>Drag and Drop File Upload using DropzoneJS and PHP + MySQL - Laratuorials.com</title>
  <!-- Bootstrap Css -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  
</head>
<body>
  
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h2>Drag and Drop File Upload using DropzoneJS and PHP + MySQL - Laratuorials.com</h2>
      <form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
        <div>
          <h3>Upload Multiple Image By Click On Box</h3>
        </div>
      </form>
      <button id="uploadFile">Upload Files</button>
    </div>
  </div>
</div>

</body>
</html>

Step 5 – Add Dropzone JS For Drag Drop File/Image

In step 5, Add dropzone js library and implement drag and drop file or image upload javascript code into your file or image upload form; as shown below:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>

<script type="text/javascript">
  
    Dropzone.autoDiscover = false;
  
    var myDropzone = new Dropzone(".dropzone", { 
       autoProcessQueue: false,
       maxFilesize: 1,
       acceptedFiles: ".jpeg,.jpg,.png,.gif"
    });
  
    $('#uploadFile').click(function(){
       myDropzone.processQueue();
    });
      
</script>

Step 6 – Store Image File into MySQL DB

In step 6, create one file that named upload.php file. This php file code will insert/store image file data into mysql database and directory.

Note that, If the image file upload is successfully inserted / stored into database, it will display success message. Otherwise if there is any error, it will display error message.

So, add the below code into your insert.php file:

<?php
  include_once 'my_db.php';

  $uploadDir = 'uploads';

  $tmpFile = $_FILES['file']['tmp_name'];
  $filetype = $_FILES["file"]["type"];
  $filesize = $_FILES["file"]["size"];

 // upload file to directory
 $filename = $uploadDir.'/'.time().'-'. $_FILES['file']['name'];
 move_uploaded_file($tmpFile,$filename);

 // insert file into db
 $sql="INSERT INTO images(file,type,size) VALUES('$filename','$filetype','$filesize')";
                    
 mysqli_query($conn,$sql);

?>

Step 7 – TestThis PHP App

Finally, you need to open your browser and type http://localhost/demo/ this run project on local machine.