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...

There is something problem with your vue.js file. either some input needed or code code is missing and if nothings needed then you can try to replace the vue.js file by downloading new one. — Vatsal Patel, May 01 '20 at 09:29

score 1 · Answer 1 · answered May 01 '20 at 09:44

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

Can't upload multiple large files in dropzone.js

1 Answers1