Skip to main content

Drag And Drop File Upload with jQuery and PHP

Updated on: coderszine team PHP, Tutorial

In our previous tutorial, we have explained how to implement Export HTML Table to Excel using jQuery. In this tutorial we will explain how to implement drag and drop file upload with jQuery and PHP.

File upload is a common functionality to upload files to server by browse button. Now you can easily enhance file upload functionality to enable users to upload files by drag and drop and also through file browse. The drag and drop file upload is more user friendly as it just needs to drag and drop files on it and the files automatically gets uploaded to the server via AJAX.

So if you’re looking for implementing drag and drop file upload functionality, then you’re here at right place. We will use DropzoneJS jQuery plugin to handle drag and drop file upload functionality. The tutorial explained in easy steps with live demo and link to download source code of live demo.

Also, read:

So let’s create example of drag and drop file upload with jQuery and PHP. The file structure for the example is following.

  • index.php
  • upload.js
  • upload.php

Steps1: Include jQuery and Dropzone Files

As we will handle drag abd drop file upload using DropzoneJS jQuery plugin, so we will include jQuery and DropzoneJS plugin files. We will include DropzoneJS plugin custom configuration file upload.js to handle upload to server side.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="dropzone/dropzone.css" />
<script type="text/javascript" src="dropzone/dropzone.js"></script>
<script type="text/javascript" src="js/upload.js"></script>

Steps2: Design Drag and Drop File Upload Section

Now in index.php file, we will design drag and drop file upload section using DropzoneJS CSS class.

<div 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>
	</div>
</div>

Steps3: Handle Drag and Drop File Upload with DropzoneJS jQuery plugin

In upload.js file, we will handle drag and drop file upload using DropzoneJS plugin function dropzone() with plugin options to customizes drag and drop upload functionality. As we will upload files to server and into MySQL database table, so we will give upload.php to make Ajax request to server side to handle file upload at server side.

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

Steps4: Handle File Upload at Server Side

Now in upload.php file, we will handle functionality to upload file server side and also handle uploaded file details insert into MySQL database table upload.

<?php
include_once("db_connect.php");
if(!empty($_FILES)){     
    $uploadDir = "uploads/";
    $fileName = $_FILES['file']['name'];
    $uploadedFile = $uploadDir.$fileName;    
    if(move_uploaded_file($_FILES['file']['tmp_name'],$uploadedFile)){
        $mysqlInsert = "INSERT INTO uploads (file_name, upload_time)VALUES('".$fileName."','".date("Y-m-d H:i:s")."')";
		mysqli_query($conn, $mysqlInsert);
    }    
}
?>

Steps5: Create MySQL Database Table

As we have handled functionality to insert uploaded file details to MySQL database table. So we will create table upload using below table create query to insert record to this table.

CREATE TABLE IF NOT EXISTS `uploads` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `file_name` varchar(255) NOT NULL,
  `upload_time` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB;

You may also like:

You can view the live demo from the Demo link and can download the source from the Download link below.
Demo Download

2 thoughts on “Drag And Drop File Upload with jQuery and PHP”

  1. Hi,

    Not sure if you support this but I have followed the instructions and the file is uploaded (as in graphically on screen) then it reverts to a ‘X’. If you hover over the X you get a huge ‘!DOCTYE text that does not indicate an error.

    Any help would be appreciated!

Comments are closed.