How to use vue.js syntax inside a string template with dropzone.js

Question

I am currently trying to implement dropzone.js Doc Ref - into my application. But since i've managed to run the basic functionallity of dropzone.js

I want to customize the preview-template to hide and show the upload progressbar during different application state.

I can customize the preview-template by passing an html string to the options object during initialization of the dropzone instance. As stated in the dropzone.js docs But obviously the vue syntax is not going to be processed if i simply sprinkle it over this html string. It somehow has to be processed to implement the thing.

Problem:

What i wanna do is to use vue.js syntax inside this preview-template. This is the component i'm talking about.

Code:

<dropzone id="myVueDropzone" :use-custom-dropzone-options=true
          :dropzoneOptions="dzOptions"
          :url="photosForm.uploadImageUrl"
          v-on:vdropzone-removed-file="deleteImage"
          :preview-template="templatePreview"
          v-on:vdropzone-success="showSuccess">
</dropzone>

Vue-Script Code:

import Dropzone from 'vue2-dropzone';
export default {

    methods: {

        templatePreview(){
            return `
                    <div class="dz-preview dz-file-preview">
                      <div class="dz-image" style="width: 200px;height: 180px">
                          <img data-dz-thumbnail />
                      </div>
                      <div class="dz-details">
                        <div class="dz-size"><span data-dz-size></span></div>
                        <div class="dz-filename"><span data-dz-name></span></div>
                      </div>

                      <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                      <div class="dz-error-message"><span data-dz-errormessage></span></div>
                      <div class="dz-success-mark"><i class="fa fa-check"></i></div>
                      <div class="dz-error-mark"><i class="fa fa-close"></i></div>
                    </div>
                    <div class="">
                        <select class="form-control" title="" name="image_type">
                            <options v-for="type in image_type" value="type.value">{{ type.title }}</options>
                        </select>
                    </div>
              `;
        }
    },
}

Github Resource, Github Issue

Author of library says,

Unfortunately what your wanting to do isn't easily achievable at the moment, although it would be nice. We're currently planning a bit of a rewrite of this module so we'll see if we can work out how to bake this in. Here

Selfpreservation

You can't use Vue in the preview template, you have to hide the dropzone's built in preview and then manually iterate over the files with v-for ;} – Zetes

@Zetes Yes i have to do something like that, but it will not shown in dropzone area and also i want that thing dynamic and reactive – Selfpreservation

Answer 1

You cannot apply Vue in the build in preview template, since dropzone internally manipulates the DOM. But you may... In your mounted hook:

new Vue({

    data() {
        return {
            files: []
        }
    },

    mounted(){
        var vm = this;

        // create your dropzone instance using reference to the target div
        var dz = new Dropzone(vm.$refs.dropzone /*, { opts }*/);

        // update data.files whenever new files are added
        dz.on('addedfiles', function(files){

            // convert files (an array like object) to real array
            files = Array.from(files);

            // add some additional properties (link, accepted...) 
            // before files are registered to the `vm` instance
            // so that Vue may convert them into reactive
            files.forEach( file => file.link = file.accepted = undefined);

            // files now may be added to `vm`;
            vm.files = files;
        });
    }
})  

Now files are reactive and you may use them with v-for in your template:

<template>
    <div>
        // this is the dropzone area
        <div ref="dropzone"></div>

        // list the files
        <p v-for="file in files"> {{file.name}} </p>
    </div>
</template>

You may use other Dropzone events to bind additional info to your reactive data that you may use in the template.

Zetes