CODEWITHSUNDEEP
javascriptvue.jsdropzone.jsvue2-dropzone
Muhammad Waqar
Muhammad Waqar

Reputation: 138

Can't upload multiple large files in dropzone.js

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

Also my networks tab shows this request which is of 200 status: enter image description here

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

Upvotes: 0

Views: 3261

Answers (1)

Muhammad Waqar
Muhammad Waqar

Reputation: 138

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

Upvotes: 1

Related Questions