Vue2-Dropzone add click event on each uploaded file

Question

I'm using Vue.js 2.4.14 and vue2-dropzone via CDN.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue2-dropzone/dist/vue2Dropzone.min.css">

Here's my vue-dropzone in component:

<vue-dropzone ref="myVueDropzone" :options="dropzoneOptions"></vue-dropzone>

After uploading a file, it appears in the dropzone like this:

I want to trigger an event when clicking on the uploaded file preview, with the goal of opening the file preview in a new browser tab.

How can I attach a click listener to each of all the file previews that are uploaded into a dropzone component?

Answer 1

vue2-dropzone doesn't provide a click event, but you could create your own. When the vdropzone-file-added event fires, which happens any time a file is added to the dropzone, you can use that to add a click event listener

<vue-dropzone 
  ref="myVueDropzone"
  :options="dropzoneOptions"
  @vdropzone-file-added="added">
</vue-dropzone>

added(file) {
  if (file.previewElement) {
    // get details overlay element that appears when hovering a thumbnail
    const detailsElement = file.previewElement.querySelector('.dz-details');
    // add click listener to it
    detailsElement.addEventListener('click', () => {
      this.fileClick(file);
    });
  }
},
fileClick(file) {
  const url = URL.createObjectURL(file);
  window.open(url);
}