AJAX Multiple File Upload to be Converted to Dropzone - php

Question

Hi I would like to seek help on how can I convert my regular Multiple Select Form Upload using AJAX to a Dropzone?
Below is my existing code:
<form name="uploadForm" id="uploadForm" method="POST" enctype="multipart/form-data">
<select class="form-control" id="templateName" name="templateName">
<option value="">-Select Template-</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="file" class="custom-file-input" name="xml_file[]" id="xml_file" multiple>
<button type="button" id="upload">Upload</button>
</form>
<script>
$("#upload").on("click", function(){
formData = new FormData($("form[name='uploadForm']")[0]);
$.ajax({
url: 'ajax-file-upload',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type: 'POST',
data: formData,
dataType: 'text',
cache: false,
contentType: false,
processData: false,
success: function(data){
console.log(data);
}
});
});
</script>
This is what I am trying to do
<script>
Dropzone.autoDiscover = false;
/* Dropzone Configuration */
var myDropzone = new Dropzone("#uploadForm", {
autoProcessQueue: false,
parallelUploads: 50 // Number of files process at a time (default 2)
});
$("#upload").on("click", function(){
formData = new FormData($("form[name='uploadForm']")[0]);
$.ajax({
url: 'ajax-file-upload',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type: 'POST',
data: formData,
dataType: 'text',
cache: false,
contentType: false,
processData: false,
success: function(data){
console.log(data);
}
});
});
</script>
However it only returns me formdata for the select option tag,
I know myDropzone.files can return me the files to be uploaded but how do I make it the same exact formdata that I passed on originally. Because I need to access the xml_file data on the backend.

Answer 1

I already come up with the solution,
(1) first I need to retain the <input type="file" class="custom-file-input" name="xml_file[]" id="xml_file" multiple> , you may hide it if you totally want to upload just by dropping the files, otherwise leave it visible.
(2) Upload Clicking Upload Button, I will need to set and update the value of the formData. To update my formData I need to append input name xml_file[]
with
.dropzone.getAcceptedFiles(). This is how we access dropzone accepted files, loop into this array to see all the accepted files.
See below for reference, there's still a lot of room for improvement, I will just leave it like this for now.
<script>
Dropzone.autoDiscover = false;
/* Dropzone Configuration */
var myDropzone = new Dropzone("#uploadForm", {
autoProcessQueue: false,
parallelUploads: 50 // Number of files process at a time (default 2)
});
$("#upload").on("click", function(){
formData = new FormData($("form[name='uploadForm']")[0]);
$.each($("form[name='uploadForm']")[0].dropzone.getAcceptedFiles(),
function(a,b){
formData.append('xml_file[]', $("form[name='uploadForm']")[0].dropzone.getAcceptedFiles()[a]);
});
$.ajax({
url: 'ajax-file-upload',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type: 'POST',
data: formData,
dataType: 'text',
cache: false,
contentType: false,
processData: false,
success: function(data){
console.log(data);
}
});
});
</script>