How to replace current file?

[alucardu]

I have set my options with maxFiles: 1 and when I drop more than 1 file I get a message You can not upload any more files. but I still have multiple images in my dropzone:

Is there an easy way to replace the current uploaded file with a new file?

What I've tried is to add a file added event and than remove the current file:

<dropzone
  id="c-dropzone"
  ref="dropzone"
  :options="options"
  :include-styling="false"
  @vdropzone-file-added="added()"
>
  <slot />
</dropzone>

methods: {
  added (file) {
    console.log('You uploaded a file!')
    this.$refs.dropzone.removeAllFiles()
  }
}

But when I run this code the image that's being uploaded is removed...

[thinhnw]

Method removeFile(file) should do the job
I give the component a data of the current uploaded file

data() {
  return { 
     currentFile: null 
  } 
}

Then when a new file added I remove the old one

methods: {
  added(file) {
    if (this.currentFile !== null) {
      this.$refs.dropzone.removeFile(this.currentFile) 
    }
    this.currentFile = file
  } 
}

Hope this will help

[yogithesymbian]

also you can do these tips

    @vdropzone-file-added="addFile"
    @vdropzone-removed-file="removeFile"
    @vdropzone-complete="afterComplete"

just added afterComplete
and then in methods

afterComplete(file) {
// we can file.status === 'error' ==> remove the first index of current file [0]
}