How to upload multiple files using dropzone.js? - php

Question

My problem is when I drag & drop multiple files that time each image is called a particular ajax. I want to multiple file upload time only one ajax call.
I want to choose a single file and drag & drop it in dropzone and another file drag & drop so as not to replace the file with to first one I need both theme and click on the button that time save in the folder at one time ajax call.
Here is my code
HTML file
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
<div class="row">
<form action="route.php?actionPresubmission=loanPreSubmission" class="form-horizontal dropzone" id="imageform">
</form>
</div>
route.php
$uploadDir = 'upload';
if (!empty($_FILES)) {
$tmpFile = $_FILES['file']['tmp_name'];
$filename = $uploadDir.'/'.time().'-'. $_FILES['file']['name'];
move_uploaded_file($tmpFile,$filename);
}
Thanks

Answer 1

Interpreting the question, I think you want to upload multiple files through one call.
For that, you need to stop autoProcessQueue which is true by default
Script:
Dropzone.options.myDropzone = {
autoProcessQueue: false, //This stops auto processing
acceptedFiles:".png,.jpg", //Change it according to your requirement.
init: function(){
var submit = document.querySelector('#submit');
mydropzone = this;
submit.addEventListener("click", function(){
mydropzone.processQueue();
});
this.on("success", function(file,response){
alert(response);
});
},
};
HTML:
<form action="upload.php" class="dropzone" id="myDropzone"></form>
<div>
<button type="button" class="btn btn-info" id="submit">Upload</button>
</div>
PHP
<?php
$folderName = 'upload/';
if(!empty($_FILES))
{
$file = $_FILES['file']['tmp_name'];
$fileLocation = $folderName . $_FILES['file']['name'];
move_uploaded_file($file,$fileLocation);
} ?>
Hope this helped you :)