Upload all files on button click – Dropzone and PHP

Last updated on by

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

Sometimes, it requires uploading 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

Demo  Download

Contents

  1. Download & Include
  2. Create Dropzone Layout
  3. Create PHP file to upload file
  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>

2. Create Dropzone Layout

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" >
     </form> 
  </div>

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

3. Create PHP file to upload file

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

<?php
// 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";
}else{ 
  $msg = "Error while uploading";
}
echo $msg;
exit;

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)
});

$('#uploadfiles').click(function(){
   myDropzone.processQueue();
});

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.

7 thoughts on “Upload all files on button click – Dropzone and PHP”

  1. Thanks soo much for such post, really love the codes…
    but it doesnt seem to send all images at once, it only sends two when you click on upload.

    Reply

Leave a Comment

© 2016-2025 Makitweb, All rights reserved