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

[SagarNaliyapara]

I am currentlyl trying to implement dropzone.js 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, right?

I can't wrap my head around, what i can do to use vue.js syntax inside this preview-template. This is the component i'm talking about. I used vue-electron and the vue-cli to setup my basic app.

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

            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>
              `;
        }

[rowanwins]

Hi @SagarNaliyapara

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.

[SagarNaliyapara]

Thanks! hope you will release soon 👍

[vrajroham]

Hi folks,

Version 3 is now released. Check out the new docs for more info.

[achiduku]

Any updates on this?

[divdax]

Would love to use the preview with vue so we could iterate files with v-for use filters and many more! 🙏

[stf1981]

Hello, mybe that will help somebody.

My goal was that i can use the font-awesome vue plugin in the string template. And this is my solution, at the moment. Follow the steps:

1. Create a string template elsewhere in your vue template and give them a ref tag. The vue-dropzone needs also the ref tag. So that the template can be rendered with the vue plugin.
2. Now go the mounted function where are the dropzone is used and set the string template with that code: this.$refs.myVueDropzone.dropzone.options.previewTemplate = this.$refs.dzFilePreview.outerHTML;

Now the string template is changed.