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