CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue2-dropzone
psudo
psudo

Reputation: 1558

Clear upload area in Vue2-Dropzone

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 ?

Upvotes: 0

Views: 3100

Answers (2)

Igor
Igor

Reputation: 1311

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>

Upvotes: 0

ittus
ittus

Reputation: 22393

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()

Upvotes: 4

Related Questions