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 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 drag files in Dropzone area on a single click.

Upload all files on button click - Dropzone and PHP


Contents

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

1. Download & Include

  • Download 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.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js' type='text/javascript'></script>

2. HTML

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. PHP

Create an upload.php file and an uploads directory.

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

Upload the file to uploads directory.

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

Drag files and click the Upload Files button.


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.

Related Post

Spread the love
  • 3
  •  
  •  
  •  
  •  
  •  

2 Comments

  1. Baba Ahmed said:

    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.

    February 2, 2019
    Reply
    • Yogesh Singh said:

      Hi Ahmed,
      Thanks, for mentioning it. I updated the tutorial.

      February 3, 2019
      Reply

Leave a Reply

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