Dropzone multiple file upload uploads 2 files at a time - dropzone.js

Question

I have the following code
HTML
<form action="{{ route('documents.store') }}" method="POST" class="kt-form kt-form--label-right">
#csrf
<div class="kt-portlet__body">
<div class="form-group">
<div class="dropzone dropzone-default dropzone-success" id="documents_upload" style="padding: 0;">
<div class="dropzone-msg dz-message needsclick">
<h3 class="dropzone-msg-title">Drop files here</h3>
</div>
</div>
</div>
</div>
</form>
Javascript
<script type="text/javascript">
$(document).ready(function() {
$('#documents_upload').dropzone({
url: "{{ route('documents.store') }}", // Set the url for your upload script location
paramName: "documents", // The name that will be used to transfer the file
maxFiles: 50,
maxFilesize: 4, // MB
addRemoveLinks: true,
acceptedFiles: "application/msword, application/vnd.ms-excel, application/pdf, image/*, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/*",
uploadMultiple: true,
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
queuecomplete: function() {
// notify about successful upload
// window.location.replace("{{ route('client.documents.index') }}");
}
});
});
</script>
The problem
It seems like this uploads the documents on chunks, 2 at a time. So if I want to upload 8 files it makes 4 requests, each containing 2 files. I want to upload all at once, is there any easy way I can do this ? This method causes many problems, because the user may upload a large amount of documents and when half of them are ready, he can leave/refresh the page, etc. and he will have to search which documents have been uploaded and which have not.

Answer 1

You need to tell the dropzone to do a parallel upload in the options of your dropzone, by the quantity you want.
<script type="text/javascript">
$(document).ready(function() {
$('#documents_upload').dropzone({
url: "{{ route('documents.store') }}", // Set the url for your upload script location
paramName: "documents", // The name that will be used to transfer the file
maxFiles: 50,
maxFilesize: 4, // MB
addRemoveLinks: true,
acceptedFiles: "application/msword, application/vnd.ms-excel, application/pdf, image/*, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/*",
parallelUploads:10,
uploadMultiple: true,
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
queuecomplete: function() {
// notify about successful upload
// window.location.replace("{{ route('client.documents.index') }}");
}
});
});
Let me know if it worked!!