VueJS dropzone does not working properly on drag/drop

Question

I am using vue2-dropzone library and my complaint is the ref value of a dropzone component doesn't contain the file user droped. After user adds the second file the ref of dropzone contains only previous one. But it works correctly when user select on file dialog.

<vue-dropzone ref="docfile" id="dropzone" :options="dzOptions"></vue-dropzone>

dzOptions: {
    url: self.$apiUrl + "client/documents/",
    autoProcessQueue: false,
    acceptedFiles: "application/pdf",
    uploadMultiple: false,
    maxNumberOfFiles: 1,
    maxFilesize: 30,
    addRemoveLinks: true,
    dictDefaultMessage: "Select File",
    init: function() {
        this.on("addedfiles", function(files) {
            if (files.length > 1) {
                self.$toaster.error("You can upload only one.");
                this.removeAllFiles();
                return;
            }
            if (files[0].type != "application/pdf") {
                self.$toaster.error("You can upload only pdf file.");
                this.removeAllFiles();
                return;
            }
            self.upload();
        });
    }
}

upload() {
    var self = this;
    if (self.$refs.docfile.dropzone.files.length == 0) {
        self.$toaster.error("No document to upload.");
        return;
    }
    var filePath = self.$refs.docfile.dropzone.files[0];
    ...
}

Answer 1

I found that there is a delay when user drag a file. So I have fixed this issue using timeout in dropzone option like following.

dzOptions: {
    url: self.$apiUrl + "client/documents/",
    autoProcessQueue: false,
    acceptedFiles: "application/pdf",
    uploadMultiple: false,
    maxNumberOfFiles: 1,
    maxFilesize: 30,
    addRemoveLinks: true,
    dictDefaultMessage:
        "Select File",
    init: function() {
        this.on("addedfiles", function(files) {
            var dz = this;
            setTimeout(function() {
                self.upload();
            }, 500);
        });
    }
}

Answer 2

You are accessing your references like this:

self.$refs.docfile.dropzone

Try like this:

self.$refs.docfile

As per the files, you could get them with the: getAcceptedFiles(), getRejectedFiles(), getQueuedFiles() methods.

---

Some example on how to use vue-uploads events:

data: () => ({
    dropzoneOptions: {
      ...
    },
    myFiles: []
}),

<vue-dropzone ref="myVueDropzone" id="dropzone"
    :options="dropzoneOptions"
    @vdropzone-success="filesUploaded">
</vue-dropzone>

filesUploaded(event){
    this.myFiles.push(JSON.parse(event.xhr.response));
},