Clear upload area in Vue2-Dropzone

Question

I'm currently working on Laravel Vue SPA admin panel. And I've applied Vue2-Dropzone to upload images for the gallery section.

In this project the vue2-dropzone form opens on a bootstrap model.

My codes successfully uploads the images. When I close the model and reopen it to upload other images it shows the thumbnails of previously uploaded images.

Below is my code snippet:

import vue2Dropzone from "vue2-dropzone";
import "vue2-dropzone/dist/vue2Dropzone.min.css";
export default {
  data() {
    return {
      dropzoneOptions: {
        url: "/api/carousel",
        maxFilesize: 10,
        acceptedFiles: '.jpg, .jpeg',
        dictDefaultMessage: "Click or Drag and Drop to upload",
        headers: {
          "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]")
            .content
        }
      }
    };
  },
  methods: {
    newModal() {
      vue2Dropzone.removeAllFiles(true);
      $("#addNew").modal("show");
    }
  },
  components: {
    vueDropzone: vue2Dropzone
  }
};

With the above code I get the following error after clicking the add image button that opens the model to upload images:

app.js:84606 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_vue2_dropzone___default.a.removeAllFiles is not a function at VueComponent.newModal (app.js:84606) at invoker (app.js:54930) at HTMLButtonElement.fn._withTask.fn._withTask (app.js:54729)

I want to clear the thumbnails of previously uploaded images from dropzone modal.

Can anyone help me out on this ?

score 4 · Answer 1 · answered Jul 24 '19 at 10:09

4

Assume you have vue-dropzone with ref in template

 <vue-dropzone ref="myVueDropzone" id="dropzone">
 </vue-dropzone>

then you should use

  this.$refs.myVueDropzone.removeAllFiles()

answered Jul 24 '19 at 10:09

ittus

21,730
5
57
57

Thanks, I'd find the solution in Vue2-Dropzone closed issue also. – psudo Jul 24 '19 at 10:12

score 0 · Answer 2 · answered Apr 21 '21 at 09:55

The removeAllFiles() is kind of a hack. It won't work for some cases.

For example, it will not 'reset' the Dropzones' options object. So if you want to do validations for diferent cases via the options object, it will not reset with the removeAllFiles() method.

The right way to reset the Dropzone (or any Vue object in that matter) is to set and change the :key attribute. Like this for example:

<vue-dropzone :key="`dropzone-${dynamicVariableOrJustSomeCounter}`">
</vue-dropzone>

works half. if use `this.$refs.dropz.manuallyAddFile(el, el.url)` duplic template prevew. my point how can I to restart or clean dropzone — Carlos, Nov 30 '21 at 20:57

Clear upload area in Vue2-Dropzone

2 Answers2