Geek Answers Handbook

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

I am currently trying to implement dropzone.js Doc Ref - in my application. But since I managed to run the main dropzone.js functionality

I want to configure preview-templateto hide and show the loading indicator under different conditions of the application.

I can customize preview-templateby passing the html string to the parameter object during instance initialization dropzone. As stated in the dropzone.jsdocumentation But obviously the vuesyntax will not be processed if I just sprinkle it on this HTML line. It must somehow be handled in order to realize the thing.

Problem:

What I want to do is use the syntax vue.jsinside 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

The author of the library says

Unfortunately, what you want to do is not easy at the moment, although that would be nice. We are currently planning to rewrite this module a bit, so we'll see if we can decide how to bake it. Here

+5
source share
1 answer

Vue , dropzone DOM. ... mounted:

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

, v-for :

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

Dropzone , .

+2

More articles:


All Articles