DropzoneJs + PHP: Multiple Files Upload – Complete Guide

DropzoneJs + PHP: Developing a Multiple Files Upload – Complete Guide

In this tutorial we are going to learn using DropzoneJs library to upload files to the server by simply dragging and dropping with image previews. DropzoneJs is a fantastic lightweight, open source JavaScript library that does not rely on only JQuery. File uploading with Dropzone.js is super easy.

On the front end or client side we will use DropzoneJs to upload multiple files through a form and then at the back-end PHP will be used to handle the uploaded files.

Check file size and file type before uploading using JQuery – Fully Working Code

You may use any IDE (integrated development environment) or text editor like notepad++ for coding. We use sublime text.

File Uploading – Step By Step Guide

Step 1

Before actually starting the coding, you need to download the following files

  1. Download DropzoneJS from this URL
  2. Download dropzone.css from this URL, if you like some ready made css.
  3. Create a folder  for uploads, for example “profiles”
  4. Create a file “index.php”, for the upload form.
  5. Create a file “process.php”, for handling back-end file upload process.

Your folder & file structure should look like this after the 1st step:

pkshops_dropzone_fileupload_image1

Step 2.

Open Index.php and copy the following code into it


<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Dropzone Multiple File Upload Tutorial</title>
<link href="css/dropzone.css" type="text/css" rel="stylesheet" />
</head>
<body>

<h2 align="center"> Multiple Files Upload </h2>


<form action="process.php" class="dropzone"></form>

</body>
<script src="dropzone.js"></script>
</html>

We included dropzone.css file in the head section and created a form with the class “dropzone”, that do the real magic and in action we name the php file that will process the uploaded files. Please note we do not included any file input control or anctype in form tag, the dropzone.js will handle all this automatically by recognizing the class in form tag. At the end, after closing body tag, we added dropzone.js file.

Now if you open index.php with your browser, it will look like the screen below

pkshops_dropzone_fileupload_image2

We haven’t done yet, we need to add php code in process.php to handle the uploaded file(s)

Step 3.

Open process.php and insert the following code into it

<?php $ds = DIRECTORY_SEPARATOR; $uploadFolder = '/profiles';     if (!empty($_FILES)) {         $tempFileName = $_FILES['file']['tmp_name'];         $destPath = dirname( __FILE__ ) . $ds. $uploadFolder . $ds;         $destFile =  $destPath. $_FILES['file']['name'];         move_uploaded_file($tempFileName,$destFile);     } ?> 

We create a directory separator variable, define the destination folder, check if $_FILES has some files, define a temp file name, destination path and destination file name. In last line of code, we actually move the file to the destination folder on server.

Open the index.php file again with browser and try dragging and dropping some files, it should be working perfectly.

pkshops_dropzone_fileupload_image3

Step 4. Confirmation

Open your profiles folder, and you will see the uploaded files. Be carefull when you are uploading files with similar file names, it will overwrite the old files on the server. To prevent it from happening, give random name to your uploaded files.

Leave a Reply

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