Syntax for default message in custom template

[gilles6]

What is the correct syntax to change the default message in a custom template ?

This one doesn't work: <div class="dz-message" data-dz-message><span>Your Custom Message</span></div>

[rowanwins]

Have you tried using any of the language settings in your options object?

Can you post a fuller snippet?

[gilles6]

It works fine with language settings in my options but I need to change the CSS of this message, that's why I'm trying to put it in my template.

methods: {
    template: function() {
        return `
            <div class="dz-preview dz-file-preview col-4 p-1 m-0 d-flex align-items-center" style="background-color: transparent;">
                <div class="dz-message"><span data-dz-message>===把图片拖放这里===</span></div>
                <img data-dz-thumbnail class="img-fluid rounded"></img>
                <div class="dz-details">
                    <div class="dz-filename"><span data-dz-name></span></div>
                    <div class="dz-size" data-dz-size></div>
                </div>
                <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></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 class="dz-error-message"><span data-dz-errormessage></span></div>
            </div>`;
    },
}

The div with dz-message class is not displaying anything, other divs work fine.

[rowanwins]

Sorry for the slow reply, can you create a mockup of what you are trying to achieve @devondahon , I'm having a bit of trouble understanding what you want to do?

[vrajroham]

@devondahon Did you resolved your issue?

[jomedinna]

@rowanwins he means this message (default message / dictDefaultMessage) :

disappears when a custom template is used (previewTemplate) and looks like this:

briefly, if we use "previewTemplate" the default message is not rendering. I have the same problem btw!

@devondahon @vrajroham you have to use the class: "dropzone" in the parent container.

[boka18]

+1 . Anyone able to solve this? @jomedinna @rowanwins @devondahon

[noe23]

@boka18 u need its works for me. you need to define dz-default dz-message in the html of the form, not in the template <form action="/file-upload" class="dropzone dz-clickable" id="uploadImageForm"><div class="dz-default dz-message "><span>Drop files here to uploassd</span></div></form>

[jordanboston]

Anyone have any info on this? @boka18 @jomedinna @rowanwins @devondahon

I am running into an issue, while using useCustomSlot and previewTemplate().

I have to set useCustomSlot to false after adding the file to fix it, but I'm wondering if this is the correct way to use these together? I am only testing this stuff out without a live endpoint now. I will want to be able to add progress, and messaging along the way for the user, but it is feeling hard to manipulate the previewTemplate at this point.

..a custom error message is one need, for instance.

[johncarter-]

Setting the default message with a custom template is actually in the official docs, but took me a while to find it: https://rowanwins.github.io/vue-dropzone/docs/dist/#/custom-html

Hope that helps someone else, or future me.

[haba-sensei]

@johncarter- bro you save me :D ty