Drag and drop file upload using DropzoneJS and PHP


If you want to implement drag and drop files upload in your PHP project, then this tutorial will help a lot. You can implement drag and drop images or files upload within 5 minutes with our tutorial.

Using DropzoneJS and PHP we can easily implement the drag and drop file upload in our web application. DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery). DropzoneJS does not handle files uplod to the server. So, we will use PHP for upload the files on server and MySQL for insert the file information at the database.

You need two Dropzone library files dropzone.js and dropzone.css. You can download these two files from DropzoneJS site. Also you can get these files into our downloadable package.

Create js/ folder and insert the dropzone.js file into it.
Create css/ folder and insert the dropzone.css file into it.
Create uploads/ folder for store the uploaded files.
Create index.html file for front form page.
Create upload.php file for handling server-side file upload and store file information into the database.

Now the folders and files structure would look like following.

  • js/
    • dropzone.js
  • css/
    • dropzone.css
  • uploads/
  • index.html
  • upload.php

Database Table Creation:

If you want to store file information, create a table into the database. For testing we have created a files table for storing uploaded file name.

CREATE TABLE `files` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
    `uploaded` datetime NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;


Include the Dropzone libraries.

<!-- Add Dropzone -->
<link rel="stylesheet" type="text/css" href="css/dropzone.css" />
<script type="text/javascript" src="js/dropzone.js"></script>

You need only form opening and closing tags without any form elements. Into <form> tag need action and class attributes. action attribute defines the action to be perform server-side upload. dropzone class is identifier of the Dropzone library.

<div class="image_upload_div">
    <form action="upload.php" class="dropzone">


This file is used for server-side upload and inserting the file information into the database.

//database configuration
$dbHost 'localhost';
$dbUsername 'root';
$dbPassword '';
$dbName 'semicolonworld';
//connect with the database
$conn = new mysqli($dbHost$dbUsername$dbPassword$dbName);
"Failed to connect to MySQL: (" $mysqli->connect_errno ") " $mysqli->connect_error;
$targetDir "uploads/";
$fileName $_FILES['file']['name'];
$targetFile $targetDir.$fileName;
//insert file information into db table
$conn->query("INSERT INTO files (file_name, uploaded) VALUES('".$fileName."','".date("Y-m-d H:i:s")."')");

 That’s all. If you have any query about this tutorial and scripts, feel free to comment here.

Related Articles

Comments 0