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.css. You can download these two files from DropzoneJS site. Also you can get these files into our downloadable package.
js/ folder and insert the
dropzone.js file into it.
css/ folder and insert the
dropzone.css file into it.
uploads/ folder for store the uploaded files.
index.html file for front form page.
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.
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.
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"> </form> </div>
This file is used for server-side upload and inserting the file information into the database.
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'semicolonworld';
//connect with the database
$conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
echo "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.