1

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];
    ...
}
Li Y
  • 63
  • 3
  • 12
  • why is `uploadMultiple: false,` and `maxNumberOfFiles: 1,` if you want to upload multiple files? – Erubiel Aug 30 '18 at 19:30
  • I don't want to upload multiple files, but only single file. – Li Y Aug 30 '18 at 19:35
  • "After user adds the second file the ref of dropzone contains only previous one" – Erubiel Aug 30 '18 at 19:36
  • After I drag the first file the ref does not contain any file, and I drag the second file then the ref contains one(the first dragged file). – Li Y Aug 30 '18 at 19:38

2 Answers2

0

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));
},
Erubiel
  • 2,934
  • 14
  • 32
  • Thank you for your answer. I tried that, but it occurs an error. So self.$refs.docfile does not have files. – Li Y Aug 30 '18 at 19:46
  • Try `console.log(self.$refs.docfile);` and post a screenshot of the result – Erubiel Aug 30 '18 at 19:48
  • I tried but it doesn't contain 'files'. So I think it is synchronization issue, upload method is called before the file is represented on ref. – Li Y Aug 30 '18 at 19:55
  • you could make an append to get all the files... with the provided functions, that, or add a `data: files: []`, property, which is modified on `vdropzone-success(file, response)` – Erubiel Aug 30 '18 at 19:56
  • try with an array in data properties... then access that array directly – Erubiel Aug 30 '18 at 19:58
  • Is there any other way? I think it isn't a smart way. – Li Y Aug 30 '18 at 20:00
  • I dunno, by the looks of the docs, your comments, and my actual experience with the library, i would say its the only way... it's not that difficult... just append the file to the array on success... That's why those events are for, to use them! – Erubiel Aug 30 '18 at 20:03
  • Also, why are u using a "custom upload function"?, i think everything you are trying to do can be accomplished with the component events. – Erubiel Aug 30 '18 at 20:10
  • Right. The type and number of file can be checked by default and I can do it. But I am using Restful api, and I have to send data in required format. – Li Y Aug 30 '18 at 20:18
  • i think you can you use the on sending event: `vdropzone-sending(file, xhr, formData) | Modify the request and add addtional parameters to request before sending` – Erubiel Aug 30 '18 at 20:25
0

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);
        });
    }
}
Li Y
  • 63
  • 3
  • 12