Step-by-Step: File Uploads Made Easy with Dropzone.js and PHP

In web development, file upload functionality is a common requirement for many applications. PHP offers multiple choices for file uploads, but among them, Dropzone.js is widely favored. This JavaScript library streamlines the file upload process and offers an interface that can be customized and easily used by users.

Dropzone.js can be used with or without jQuery in your project, and it does not have any additional library requirements. This library does not handle file uploads to your server directly. In this tutorial, PHP will be used for uploading.

File upload can be done by either dragging and dropping or by using the file chooser dialog that opens when the drag n’ drop widget is clicked. While uploading, Dropzone.js displays a progress bar, generates a thumbnail image, and provides file size preview after uploading.

Step-by-Step: File Uploads Made Easy with Dropzone.js and PHP

Demo Download

1. Download and Include Dropzone

Download the Dropzone.js library from here.
Include dropzone.css and dropzone.js files in your page.

<link href='dropzone.css' type='text/css' rel='stylesheet'>
<script src='dropzone.js' type='text/javascript'></script>

Or you can use CND –

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />

2. HTML – Create Dropzone container

Create a <form > element where set action='upload.php'and add class='dropzone', it tells Dropzone.js to activate its functionality for this form. Add id dropzonewidget, using this set Dropzone options.

From upload.php file handle file upload when a file is selected.

<!doctype html>
<html>
<head>
      <title>How to upload a file using Dropzone.js with PHP</title>
      
      <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script> 
      <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
</head>
<body >
      <div class="container" >
           <div class='content'>
                 <form action="upload.php" class="dropzone" id="dropzonewidget">

                 </form>
           </div>
      </div>

</body>
</html>

3. Dropzone JavaScript configuration

Set the options for the dropzonewidget element. Dropzone.options is an object that holds the default options for all Dropzone instances, and we’re overriding those options for this specific widget.

Set maxFilesize to 2 MB, and allowed file extensions to “.jpeg,.jpg,.png,.pdf”.

With the success event handle the Dropzone upload response. Parse the response as a JSON object using JSON.parse(). If the status property of the JSON object is equal to 0, it displays an alert with the msg property of the JSON object.

Dropzone.options.dropzonewidget = { 
     maxFilesize: 2, // 2 MB
     acceptedFiles: ".jpeg,.jpg,.png,.pdf", // Allowed extensions
     success: function(file, response){ // Dropzone upload response

          var jsonObj = JSON.parse(response);

          if(jsonObj.status == 0){
                alert(jsonObj.msg);
          }
     }
};

4. PHP – Upload Dropzone selected file

Create upload.php to handle Dropzone upload request and also create uploads folder to store files.

Here, accessing Dropzone selected file using file key.

If file is selected then read file name, assign upload location with file name to $location variable, file size to $filesize, max file size to $max_size.

If the selected file size is greater than $max_size then store 0 to status key and error message to msg key of $response Array. Return it in JSON format.

Check file extension is exists in $acceptfile_ext Array, if exists then upload the file and store 1 to status key and success message to msg key of $response Array. Return it in JSON format.

<?php

if(isset($_FILES["file"]["name"])){

     // File name
     $filename = $_FILES['file']['name'];

     // Location
     $location = "uploads/".$filename;

     // File size
     $filesize = $_FILE['file']['size'];

     // Maximum file size in bytes
     $max_size = 2000000; // 2MB

     if ($filesize > $max_size) {

           // Return response
           $response['status'] = 0;
           $response['msg'] = "The file exceeds the maximum file size of 2 MB.";
           echo json_encode($response);
           exit;
     }

     // Extension
     $extension = pathinfo($location,PATHINFO_EXTENSION);
     $extension = strtolower($extension);

     // Allowed file extensions 
     $acceptfile_ext = array("jpeg","jpg","png");

     // Check file extension 
     if(in_array($extension,$acceptfile_ext)){
          
          // Upload file
          if (move_uploaded_file($_FILES["file"]["tmp_name"], $location)) {

                // Return response
                $response['status'] = 1;
                $response['msg'] = "File uploaded successfully.";
                echo json_encode($response);
                exit;

          }
     }else{

          // Return response
          $response['status'] = 0;
          $response['msg'] = "Invalid file extension.";
          echo json_encode($response);
          exit;
     }

}

5. Demo

View Demo

6. Conclusion

File upload process becomes easier when using Dropzone.js with PHP. It creates a user-friendly and customizable file upload interface. To guarantee the security and integrity of your data, always remember to validate and sanitize user input.

It is supported by the following browsers –

Chrome 7+
Firefox 4+
IE 10+
Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)
Safari 6+

If you found this tutorial helpful then don't forget to share.