Vue2-Dropzone: How to use removeFile(file)?

Question

I created a custom Dropzone with vue2Dropzone:

<drop-zone :options="MydropzoneOptions" :include-styling="false" @vdropzone-success="UploadSuccess" @removeUpload="removeFile" id="MyDropzoneID" ref="MyDropzone" :useCustomSlot=true>
        <div class="dropzone-custom-content">
            <h3>Upload Here</h3>
        </div>
</drop-zone>

The uploaded files are then displayed in a seperate div with the id="uploaded":

    <div id="uploaded" class="dropzone-previews">
        <h3>Uploaded Files:</h3>
        <template v-for="(UploadFile,index) in MyUploads">
            <img :src="UploadFile.Dateiname"><a title="Delete this file" @click="$emit('removeUpload')">Delete</a>
        </template>
    </div>

In the 'uploaded' div, beside each uploaded image (thumbnail) there is a link to delete each file. But I don't know how to implement this function. The documentation says there's a method called removeFile(file): .removeFile(file) -->Removes a file from the dropzone area.

I created a method called removeThisFile, launched @click="removeThisFile":

    removeThisFile: function(){
        this.$refs.MyDropzone.removeFile()
        console.log("File removed!")
    }

But the result was the console saying "this.$refs.Mydropzone is undefined, which makes sense now, since only the DOM object can pass the needed file infos. So I decided to try the version you see at the beginning:

<div><a[..] @click="$emit('removeUpload')></a></div>

and in the drop-zone DOM object there's a listener to this, launching my method "removeThisFile".

   <drop-zone [..] @removeUpload="removeThisFile" [..]></drop-zone>

But this also isn't working, I don't know why, since I get no error in the console, but also the method isn't launched, since there's also no "File removed!" in the console.

Why isn't it working, is this at all the right way to do this?

Answer 1

You have to pass removeFile the file that you want to remove.

So you can set your click handler to @click="removeThisFile(UploadFile)" and then removeThisFile needs to become:

    removeThisFile: function(thisFile){
        this.$refs.MyDropzone.removeFile(thisFile)
        console.log("File removed!")
    }

Answer 2

I'm not sure if you just want to remove file with your own function, but you can set in your options props the key addRemoveLinks to true as stated in the documentation of dropzone

In your case you will have something like:

MydropzoneOptions: {
  url: "...",
  addRemoveLinks: true
}

And your files will show a delete file link on the thumbnail