Drag and Drop Multiple File Upload using PHP and Dropzone.js

Image uploading is one of the most common features every website owner would love to have in their website. Users must be able to upload multiple image files easily. I just came to know about a wonderful js library dropzone.js. You can use it with php and create easy-to-use multiple file uploader in minutes. In this tutorial I will show you how to do that.   We will allow users to add multiple images just by dragging it in into our file uploader page.

This tutorial requires dropzone.js you can download it from its official website (Everything is well explained). I have used dropzone.js version 3.0 (latest till date) in this tutorial.

Now let’s start our tutorial, we have just two mail files here index.html  and file-upload.php. index.html file is a simple file which contains call to dropzone.js and css file then it has code to show up the simple form.  File-upload.php handles rest of the part, it uploads images to specified directory in server.

Note: I have used style sheet given by dropzone, you can download the zip file from here. But I have uploaded the minimal files required for this tutorial so you can download that too.

You just need a form in index.html, here is the main code:

<div id="main">
 <p> Drag n Drop Your image files below -</p>
 </div>
<form action="file-upload.php" class="dropzone"></form>

Code for file-upload.php:

<?php

$upload_dir = 'myuploads';

if (!empty($_FILES)) {

 $tempFile = $_FILES['file']['tmp_name'];
 // using DIRECTORY_SEPARATOR constant is a good practice, it makes your code portable.
 $targetPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . $upload_dir . DIRECTORY_SEPARATOR;
 // Adding timestamp with image's name so that files with same name can be uploaded easily.
 $mainFile = $targetPath.time().'-'. $_FILES['file']['name'];

 move_uploaded_file($tempFile,$mainFile);

}
?>

Its really easy to implement this tutorial, and it will hardly take your 10 minutes. We can expect a lot more from future versions of dropzone.js. Still there’s a lot that should be done like giving option to delete files after upload etc. Share this simple tutorial with your friends, I hope it will help them too.

Please follow and like us:



2 Replies to “Drag and Drop Multiple File Upload using PHP and Dropzone.js”

Leave a Comment

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