Drag and Drop File Upload using DropzoneJS and PHP

May 17, 2022May 17, 2022 Rabiya 0 Comments

Drag and drop is a very effective feature to make the web application user-friendly. Generally, this feature allows to drag an element and drop it to the different location in the web page. Drag and drop feature can be used for various purposes in the web application. If you want to make file upload functionality more interactive, drag & drop is the best option.

Dropzone. js is ‘a light weight JavaScript library that turns an HTML element into a “dropzone“‘. Users can drag and drop a file onto an area of the page, uploading to a server. … js code to our project and create a ‘drop area’ for file uploading.

Note that, Always prefer to use dropzone js for drag and drop multiple file uploading into directory and database. And you will learn step by step how to integrate dropzone js in PHP with html. And upload multiple file with drag and drop feature.

Drag and Drop File Upload with Submit Button in PHP using Dropzone

Follow following the below steps and upload file using dropzone js and jquery without refreshing the whole web page in PHP:

Step 1 – Create index.php
Step 2 – Create upload.php
Step 3 – Create Directory

Step 1 – Create index.php

First of all, create an index.php file and update the below HTML code into your index.php file.


<!DOCTYPE html>
<html>
<head>
  <title>PHP Dropzone File Upload Example Tutorial</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>
   
  <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>
</head>
<body>
   
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h2>PHP Dropzone File Upload on Button Click Example</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>
   
<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>
   
</body>
</html>

This HTML code shows the image upload form, so using this form you can upload the images on the DB table and project folder.

Step 2 – Create upload.php

In this step, create a new file name upload.php file and update the below code into your upload.php file.

<?php
 
 
$uploadDir = 'uploads';
 
 
if (!empty($_FILES)) {
 $tmpFile = $_FILES['file']['tmp_name'];
 $filename = $uploadDir.'/'.time().'-'. $_FILES['file']['name'];
 move_uploaded_file($tmpFile,$filename);
}
 
 
?>

This PHP code will upload file into project directory.