Upload all files on button click – Dropzone and PHP

Dropzone auto uploads the selected file or drag file to the server.

Sometimes, it requires to upload all selected files on a single click instead of uploading it instantly.

With Dropzone options and method this can easily be implemented.

In this tutorial, I show how you upload all selected files in the Dropzone area on a button click.

Upload all files on button click – Dropzone and PHP


  1. Download & Include
  2. HTML
  3. PHP
  4. Script
  5. Demo
  6. Conclusion

1. Download & Include

  • Download the Dropzone library from here.
  • Include dropzone.min.css in <head> section.
<link href='https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.css' type='text/css' rel='stylesheet'>
  • Include jQuery library and dropzone.min.js script at end of <body> section.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js' type='text/javascript'></script>


Create an index.html file.

Create a <form action="upload.php" class="dropzone"> and a button to upload all dragged files on a click.

Completed Code

<div class="container" >
  <div class='content'>
     <form action="upload.php" class="dropzone" >

  <input type="button" id='uploadfiles' value='Upload Files' >

3. PHP

Create an upload.php file and an uploads folder.

Assign upload directory path in $target_dir and file path in $target_file.

Upload the file to uploads folder.

Completed Code

// Upload directory
$target_dir = "uploads/";

// Upload file
$target_file = $target_dir . basename($_FILES["file"]["name"]);

$msg = "";
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
  $msg = "Successfully uploaded";
  $msg = "Error while uploading";
echo $msg;

4. Script

Call Dropzone.autoDiscover = false; to disable Dropzone auto-discovery.

Initialize dropzone on class='dropzone' and to stop dropzone from uploading the selected file add autoProcessQueue: false option.

Also, define parallelUploads option to set the maximum number of files process at a time. The default value is 2.

On button click call myDropzone.processQueue() to upload the files.

Completed Code

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(".dropzone", { 
   autoProcessQueue: false,
   parallelUploads: 10 // Number of files process at a time (default 2)


5. Demo

View Demo

6. Conclusion

Explicitly define dropzone on the selector and add autoProcessQueue: false option to stop files from auto uploading.

Call processQueue() on Dropzone instance to upload files.

If you found this tutorial helpful then don't forget to share.
Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request.