Vue-dropzone: how to add a custom button inside a custom template?

[vesper8]

I have a custom template which has a custom remove button. All of this works fine

            template: function () {
                return `
                <li class="col-md-2 col-sm-4 col-xs-6">
                    <div class="square">
                        <div class="square-content">
                            <div class="img-wrap dz-preview dz-file-preview">
                                <img data-dz-thumbnail-bg>
                            </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>
                    <div class="mask">
                        <a class="btn btn-default set-pp">Set As Profile Picture </a>
                        <a class="dz-remove btn btn-default delete-image" href="javascript:undefined;" data-dz-remove><i class="zmdi zmdi-close" aria-hidden="true" title="Delete"></i></a>
                    </div>
                </li>
                `;
}

my app lets users upload multiple profile pictures, and then I want to let the users click a button to set one of them as the "main profile picture"

You see above I have my custom delete button which works through the magic is data-dz-remove

And above I have a custom button "Set as Profile Picture"

When that button is clicked, I want to have a custom method/event/listener called that will be passed the file, same as the dz-remove

And then within that method I can write some logic to call an api point with the file.id and set that picture as the main picture in the back-end

I'm really struggling to get this to work.. any help would be appreciated!

I also realized I can't call vue methods from within the custom template. @click is not valid in this scope. If I could somehow just create a onclick event that calls a custom method and passes it the clicked image's "file" then I could take it from there

[rowanwins]

Hi @vesper8

Unfortunately it's a little tricky because those templates aren't vue-friendly.

What I'd suggest is hooking into the vdropzone-file-added event, that event will emit a file, but also attached to that file is a previewTemplate property, you should be able to navigate to the relevant child element and attach an event listener. A little bit clunky sorry but hopefully it should only take you half a dozen lines of code.

Let me know who you get on

[vesper8]

Thanks for sharing

Here's what I ended up doing.. also a bit clunky but not too bad

In my template I added this

<a class="dz-profile-pic" data-dz-profile-pic>Set As Profile Picture </a>

Then in my thumbnail method, I added this

ref = file.previewElement.querySelectorAll("[data-dz-profile-pic]");
for (j = 0, len = ref.length; j < len; j++) {
    ref[j].id = file.id;
}

And finally in my mounted hook I added

$(".dz-profile-pic").click(function (e) {
    this.profilePic(e.target.id);
}.bind(this));

[LouqG]

hey vesper8, did you use jquery in your mounted hook? how did you do that?

[vesper8]

@LouqG yes I'm using jquery since it's already a dependency in my project. I'm sure you could do the same with vanilla js if you need to