VueJS dropzone does not working properly on drag/drop - vue.js

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

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));
},

Answer 2

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);
});
}
}