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.
Contents
1. Download & Include
- Download the Dropzone library from here.
- Include
dropzone.min.cssin<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.jsscript 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
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.
