Drag and drop multiple file upload using jQuery, Ajax, and PHP

Today we’ll explain to you how to drag and drop multiple file upload using jQuery, Ajax, and PHP.

It is a common functionality widely used in web applications. You may need to upload multiple files to your form with a single uploader when working on a web application.

In this article, we will show you how to upload one or more files without refreshing the page and show thumbnails when files are successfully uploaded using jQuery, Ajax, and PHP.

Let’s create a drag and drop file upload demo that will have the following user interface.

Output - Drag and drop multiple file upload using jQuery, Ajax, and PHP - Clue Mediator

Drag and drop multiple file upload

1. Create HTML form
2. Add CSS
3. Add jQuery script
4. Write PHP code to upload files
5. Output

Let’s start with an example to upload multiple files with drag and drop feature. Refer to the following project structure.

File Structure

• drag-drop-multiple-files

  • uploads
  • db_config.php
  • file_upload.php
  • index.php

1. Create HTML form

First of all, we will create a PHP file named `index.php` to create a drag and drop file upload HTML UI.

index.php

  <title>Drag and drop Multiple file upload using Ajax JQuery PHP - Clue Mediator</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>



  <div class="container">
    <h3>Drag and drop multiple file upload using jQuery, Ajax and PHP - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3><br>
    <div id="drop_file_area">
      Drag and Drop Files Here
    </div>
    <div id="uploaded_file"></div>
  </div>

In the above code, we have added a jQuery library to send Ajax requests to the PHP file `file_upload.php` for file upload in the directory.

2. Add CSS

Now, we will add the following CSS in the `index.php` file before the closing head (`</head>`) tag for the basic UI style.

<style>
  h3 {
    line-height: 30px;
    text-align: center;
  }

  #drop_file_area {
    height: 200px;
    border: 2px dashed #ccc;
    line-height: 200px;
    text-align: center;
    font-size: 20px;
    background: #f9f9f9;
    margin-bottom: 15px;
  }

  .drag_over {
    color: #000;
    border-color: #000;
  }

  .thumbnail {
    width: 100px;
    height: 100px;
    padding: 2px;
    margin: 2px;
    border: 2px solid lightgray;
    border-radius: 3px;
    float: left;
  }

  #upload_file {
    display: none;
  }
</style>

3. Add jQuery script

Now, we need to add a jQuery script to handle drop, dragover and dragleave events. After dropping files, we will create a `formData` object and send it to the PHP file `file_upload.php` via ajax request.

Add the following script in the `index.php` file before the closing body (`</body>`) tag.

<script>
  $(document).ready(function () {
    $("html").on("dragover", function (e) {
      e.preventDefault();
      e.stopPropagation();
    });

    $("html").on("drop", function (e) {
      e.preventDefault();
      e.stopPropagation();
    });

    $('#drop_file_area').on('dragover', function () {
      $(this).addClass('drag_over');
      return false;
    });

    $('#drop_file_area').on('dragleave', function () {
      $(this).removeClass('drag_over');
      return false;
    });

    $('#drop_file_area').on('drop', function (e) {
      e.preventDefault();
      $(this).removeClass('drag_over');
      var formData = new FormData();
      var files = e.originalEvent.dataTransfer.files;
      for (var i = 0; i < files.length; i++) {
        formData.append('file[]', files[i]);
      }
      uploadFormData(formData);
    });

    function uploadFormData(form_data) {
      $.ajax({
        url: "file_upload.php",
        method: "POST",
        data: form_data,
        contentType: false,
        cache: false,
        processData: false,
        success: function (data) {
          $('#uploaded_file').append(data);
        }
      });
    }
  });
</script>

4. Write PHP code to upload files

To upload files in the directory and save data in MySQL, we need to follow the below steps.

• Create database
• Database connection
• PHP code to upload files

• Create database

  First, we have to create a `uploads` table in the database. Run the following SQL query to create a table.

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

• Database connection

  We have to create a file for database connection named `db_config.php`.

db_config.php

<!--?php
	$dbhost = "localhost";
	$dbuser = "root";
	$dbpass = "";
	$db = "demo";
	$con = mysqli_connect($dbhost, $dbuser, $dbpass , $db) or die($con);
?-->

• PHP code to upload files

  Let’s create a PHP file named `file_upload.php` to upload files in the `uploads` directory and save the file name in the database table. Make sure you have created an `uploads` folder with read and write permissions.

file_upload.php

<!--?php
// Include the database connection file
include('db_config.php');
$fileData = '';
if(isset($_FILES['file']['name'][0]))
{
  foreach($_FILES['file']['name'] as $keys =--> $values)
  {
    $fileName = $_FILES['file']['name'][$keys];
    if(move_uploaded_file($_FILES['file']['tmp_name'][$keys], 'uploads/' . $values))
    {
      $fileData .= '<img src="uploads/'.$values.'" class="thumbnail">';
      $query = "INSERT INTO uploads (file_name, upload_time)VALUES('".$fileName."','".date("Y-m-d H:i:s")."')";
      mysqli_query($con, $query);
    }
  }
}
echo $fileData;
?>

5. Output

Run the project and check the output in the browser. You will also see the entry of the image file’s name in the database table.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

Github Repository