Can't upload multiple large files in dropzone.js

Question

Curently my code is failing on uploading 9 files each of upto 32MB with following error:

Also my networks tab shows this request which is of 200 status:

Here are the dropzone configuration options that I've used:

dropzoneOptions: {
    maxFiles: 1000,
    timeout: 100000,
    maxFilesize: 100,
    parallelUploads: 1,
    paramName: 'images',
    addRemoveLinks: true,
    uploadMultiple: true,
    autoProcessQueue: false,
    maxThumbnailFilesize: 100,
    url: `${axios.defaults.baseURL}/admin/album/pictures`,
    headers: { 'Authorization': `Bearer ${accessToken()}` },
    error: this.dropzoneSubmissionError,
    success: this.dropzoneSubmissionSuccess,
},

Here is the dropzone tag:

<vue-dropzone
    ref="myVueDropzone" id="dropzone" class="custom-dropzone"
    :options="dropzoneOptions" @vdropzone-sending="addPictures"
    @vdropzone-complete-multiple="vDropzoneCompleteMultiple"
    @vdropzone-total-upload-progress="vDropzoneTotalUploadProgress"
    @vdropzone-canceled="vDropzoneCanceled"
/>

And here are the functions that are called by various events mentioned in dropzone tag:

addPictures(file, xhr, formData) {
    formData.append('album_id', this.$route.params.album_id);
},
vDropzoneCompleteMultiple(response) {
    console.log(response);
},
vDropzoneTotalUploadProgress(progress) {
    this.pictures_uploading = true;
    console.log(progress);
    this.totalUpload.width = progress;
},
vDropzoneCanceled(file) {
    console.log(file);
}

Furthermore, since I've logged the total progress in vDropzoneTotalUploadProgress function, that progress never exceeds 4.16

Any help would be appreciated...

Answer 1

Problem Solved:! Actually all I did is this:

dropzoneOptions: {
    maxFiles: 1000,
    timeout: 100000,
    maxFilesize: 100,
    paramName: 'images',
    addRemoveLinks: true,
    uploadMultiple: true,
    parallelUploads: 1000,
    autoProcessQueue: false,
    maxThumbnailFilesize: 100,
    url: `${axios.defaults.baseURL}/admin/album/pictures`,
    headers: { 'Authorization': `Bearer ${accessToken()}` },
    error: this.dropzoneSubmissionError,
    successmultiple: this.dropzoneMultipleSubmissionSuccess,
},

I just added parallel uploads to my dropzoneOptions and set that to maxFiles (you can set that whatever you want but make sure that no matter how many files you add at once, they all get uploaded parallely)

And that's it:) Hope it might help someone

Answer 2

Thank you Muhammad Waqar, this helped me