Vue-dropzone: duplicateCheck?

[FredericLatour]

I can't seem to make duplicateCheck work in version 3.0.
Moreover the prop is not documented even though there is an event duplicate-file(file) that says:

Fired when duplicateCheck is enabled.

I'm certainly doing something wrong but I can't get it.
Any clue

[rowanwins]

Hi @FredericLatour

Hmm I'm not sure where that event came from sorry. @AlexanderYW do you have any recollection? I've had a quick look in the dropzone.js source code and can't see any reference to it so I think it hsould probably be removed.

[FredericLatour]

hi @rowanwins
The idea was to prevent adding multiple time the same file ... which make sense if you ask me.
see: https://github.com/rowanwins/vue-dropzone/pull/130

[rowanwins]

Ahhhh hadn't seen that sorry. It looks like the check is still in our source code, we're just missing the property. Feel free to send through a pull request otherwise I'll try and get it done sometime over the weekend.

[FredericLatour]

@rowanwins

I must admit I'm somewhat of a rookie regarding PR stuff ...
Is the overall process like this ?:

• make a fork,
• make the necessary modification
• push the change to the origin repo

I'm quite new to vue:

• do I just need to add duplicateCheck in the props section with a default false value ?

[rowanwins]

Yep thats pretty much it @FredericLatour , although bonus marks if you update the Props page of the documentation :)

Dont worry you can't break anything and the best way to learn is giving it a go with something nice and easy.

Just sing out if you get stuck

[FredericLatour]

@rowanwins
I forked the repo, made the modif (prop+doc) ...
Now if I would like to make a test before submitting a PR what would be the best approach?
thanks

[rowanwins]

We currently don't have a test page as such (although it would be handy!)

Probably the simplest thing is to just tweak one of the docs pages quickly to test it and then revert the modification before the pull request.

[FredericLatour]

Was going to submit a PR but then decided to make a test within my app by copying the minified js directly (not the more elegant approach I have to admit :)) and it doesn't work ...
As soon as I add a file it is immediately removed ..;
I'm going to investigate what's going on...

[FredericLatour]

@rowanwins
My assumption is that the file is already added when "addedfile" is triggered (the dropzone documentation is not clear about that).
That would explain why the file is removed immediately even though it's not duplicate.
What do you think?

Here is the existing code:

this.dropzone.on('addedfile', function(file) {
      if (vm.duplicateCheck) {
        if (this.files.length) {
          this.files.forEach(function(dzfile) {
            if (dzfile.name === file.name) {
              this.removeFile(file)
              vm.$emit('duplicate-file', file)
            }
          }, this)
        }
      }
      vm.$emit('vdropzone-file-added', file)
      if (vm.isS3 && vm.wasQueueAutoProcess) {
        vm.getSignedAndUploadToS3(file);
      }
    })

[vrajroham]

@rowanwins @FredericLatour In previous version one of the contributor added this feature to component. I've it's local copy which looks like below. We have to add this to current version.

---

Prop

duplicateCheck:{
    type: Boolean,
    default: false
},

Event addedfile

this.dropzone.on('addedfile', function (file) {
  /**
  * If Duplicate Check enabled remove duplicate file and emit the event.
  */
  if (vm.duplicateCheck) {
    if (this.files.length) {
        var _i, _len;
        for (_i = 0, _len = this.files.length; _i < _len - 1; _i++) {
            if (this.files[_i].name === file.name) {
                this.removeFile(file);
                vm.$emit('duplicate-file', file)
            }
        }
    }
  }
  vm.$emit('vdropzone-file-added', file)
});

[FredericLatour]

@rowanwins & @vrajroham
In the end, I don't think this is necessarily a good idea to add the feature directly. When a file is removed, there will be a round-trip to the server and some unwanted events tiggered (at least as far as I'm concerned).

I ended up by using the accept function option that seems the most appropriate fit in order to discard duplicate files:

  data() {
    return {
      dropzoneOptions: {
        autoProcessQueue: false,
        acceptedFiles: ".img",
        accept: this.checkDupl,

And my checkDupl() function

  methods: {
    checkDupl(file, done) {
      let v:any = this.$refs.myVueDropzone;
      // use "let v = this.$refs.myVueDropzone;" instead if you are not using typescript
      let files = v.getAcceptedFiles()
      let item = files.find( el => el.upload.filename === file.name )
      if (item) {
        done("duplicate")
      } else {
        done()
      }
    },

It's not that having this feature integrated would not be interesting but because dropzone.js doesn't have this feature, it can be tricky to handle it properly in a wrapper/interface.

What do you think?

[rowanwins]

Hi @FredericLatour

Thanks for investigating, I'll take a look and see if I can work out what's going on.

[alansaldivar87]

I have the same problem with the duplicate-file, is not working but not only that, either the accepted files type, even so when try to force by ref.setOption. By the way, I added the settings as a computed props, because of the values that are read dynamically instead of hard coding. Anyway all those features were working good in the previous version but seems broken on 3.0

[thandonguocmo2020]

thanks @FredericLatour i using v:any has 1 error. i change let v= = this.$refs.myVueDropzone;
thanks you !

[FredericLatour]

@thandonguocmo2020 Indeed v:any is a typescript construct. I'm going to add a comment in my post to clarify. Thanks.

[vrajroham]

Hey Folks,

Duplicate file check feature is back 🎉 .

Please note

• The event name is changed from ~duplicate-file~ to vdropzone-duplicate-file.
• File is marked as duplicate if, added file matches name, size and lastModifiedDate with existing files and that file is not added to dropzone preview.
• To enable this feature you need to set duplicateCheck prop on dropzone to true, by default it is false.
• Reference - Props, Demo, Events, V3.4.0

Happy Coding :tada: