Drag and Drop File Upload using jQuery and PHP

Posted on

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. 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 the 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.
`file_name` varchar(255) NOT NULL,
`upload_time` varchar(255) NOT NULL,

Step2: Create Database Connection
After creating MySQL database table, we will create db_connect.php file to make connection with MySQL database.
$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>

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.
$upload_dir = "uploads/";
$fileName = $_FILES['file']['name'];
$uploaded_file = $upload_dir.$fileName;
//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 can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]

6 thoughts on “Drag and Drop File Upload using jQuery and PHP

  1. sir,
    upload of file is not getting saved in the upload folder how can i do that so that files get saved in that folder and it starts running to its 100%

    1. have you given correct upload folder path? it has writeable permissions, check all. The script is checked and uploading files to upload folder fine.

      1. sir i simply downloaded your code and created the database of file as mentioned and added it to my site but i dont know where to add the details so that upload.php get joint with dropzone and files start getting uploaded even on the index page it was written that files do not actually get uploaded so sir please help me and give your supreme guidance to me to how to start uploading files by joining them together

        1. The upload.php is called on form action to upload files on server. plz check tutorial and download script.

  2. This was interesting to start with, but there is no error handling or reporting at all, nothing with regards to security either. Maybe you could extend this tutorial?

Leave a Reply

Your email address will not be published. Required fields are marked *