Vue-dropzone: File uploads in form

[rafailml]

Hi,
I have a product form, where user can upload multiple images for product. My problem is that when user adds images to dropzone, they are uploaded before he sends the form.
Say for example user adds 5 images, they are uploaded to server. He is not submitted the form yet. He fills something in form, and then decided to remove two of images. Then he submits the form. On server I'll have 5 images, but user actually submits 3.

What can I do?

1. In that case I'll have to get what he sends, compare with what I have on server and then decide what to keep and what to delete.
2. Somehow I disable automatic submission, and submit images manually when user submits the form. I don't know it it is possible to disable automatic submission.

What is the proper way to deal with that situation?

[rowanwins]

Hi @rafailml

You can try and set autoProcessQueue dropzone option to false, you'll then need to call the processQueue() method on the submission of the form.

So something like
data () { return { .... dropzoneOptions: { url: 'https://httpbin.org/post', autoProcessQueue: false }, .... } }, methods: { onFormSubmit() { this.$refs.myDropzone.processQueue() } }
Hope that gets you on your way

[rafailml]

Thank you @rowanwins , your idea works, but I don't know why vue-dropzone sends that way only 2 files to my server ?!?!

[rafailml]

Very strange. Is this a bug or there is setting to process 2 files at time?

console.log(this.$refs.myVueDropzone.getQueuedFiles());
// Returns 5 files

this.$refs.myVueDropzone.processQueue();

console.log(this.$refs.myVueDropzone.getQueuedFiles());
// Returns 3 files

If I remove

autoProcessQueue: false

It uploads all files, but it is not the way I want.

[rowanwins]

Hi @rafailml

I believe it's probably due to the parallelUploads option. You either need to bump up that limit or you basically do a loop, whereby you upload two at a time, and just keep checking at the end of the upload how many files are left in the queue. You can find some suggestions here

[rafailml]

For some reason loop does not work for me.

let nFiles = 0;
do {
    this.$refs.myVueDropzone.processQueue();
    nFiles = this.$refs.myVueDropzone.getQueuedFiles().length;
    console.log(nFiles);
 }
 while ( nFiles > 0)

somehow nFiles is always (selected_files - 2) and I'm getting infinite loop.

What works for me is:

this.$refs.myVueDropzone.processQueue();
this.$refs.myVueDropzone.options.autoProcessQueue = true;

But I have another problem:

this.$refs.myVueDropzone.processQueue();
this.$refs.myVueDropzone.options.autoProcessQueue = true;
// This does not removes files from form
this.$refs.myVueDropzone.removeAllFiles();

[rowanwins]

Does it give you an error message @rafailml or is it just failing to clear the items? Can yo ushare a snippet of what you have currently?

[rafailml]

No, it does not show any error. That's my code:
In template:
<b-button variant="outline-success" class="float-right" @click="uploadImages">Upload</b-button>
The function:

uploadImages() {
            this.$refs.drpImages.processQueue();
            this.$refs.drpImages.options.autoProcessQueue = true;
            this.$refs.drpImages.removeAllFiles();
        }

It uploads images, but does not clear files in dropzone.

[fgzetech]

Hi, everyone. Is there any way to handle server response using processQueue() ?

[dnoodles]

Hi @rafailml

I believe it's probably due to the parallelUploads option. You either need to bump up that limit or you basically do a loop, whereby you upload two at a time, and just keep checking at the end of the upload how many files are left in the queue. You can find some suggestions here

huge help thanks! didnt understand why i only got 2 files at a time. i didnt see the limit

[mandaputtra]

@fgzetech you can use my way like this,

...
<vueDropZone
   id="dropzone"
   ref="myVueDropzone"
   :options="dropzoneOptions"
   class="mb-4"
   @vdropzone-file-added="fileAdded"
/>
...

data() {
    return {
        counter: 0,
        form: new FormData(),
        dropzoneOptions: {
            url: 'thisisrequiredsoiwritethishahahahaha',
            thumbnailWidth: 150,
            maxFilesize: 4,
            headers: {
                Authorization: `Bearer ${window.localStorage.getItem('token')}`
            },
            manuallyAddFile: true,
            autoProcessQueue: false
        }
    }
},
methods: {
    fileAdded(file) {
        this.form.append(file[this.counter], file)
        this.counter = this.counter + 1
    },
    uploadTheFile() {
        this.$axios({
            url: 'myuploadurl',
            method: 'POTS',
            data: this.form
        })
    }
}

and then you get to this nicely on your form submit. Button using form data. Notice I don't use the que,I just append it to formData whenever file uploaded.

_Sorry for my English._

[iamsajidjaved]

I hope this video will answer your question: https://youtu.be/y8ykRE1pChI
This channel has very good content related to this vue component. This issue is covered in this video