Vue-dropzone: Problems with overriding options in new version

[janperse]

• Vue2-dropzone Version: 2.3.5
• Node Version (6.9.5):
• YARN Version (0.24.6):
• OS: macOS Sierra

Description:

Hey, just ran into a problem where i updated a project, together with most of the packages. I was on ^2.2.4 version and had it updated on 2.3.5. The problem is that some settings for the plugin changed - options and preview template, which i found out later in the docs. Anyway, i had overridden dictDefaultMessage which is now under the language, but it doesn't remove the material design icon. It stays inside <span> and there is no way to remove it with that. I rolled back on the old version just so i didn't have a broken project.

Steps To Reproduce:

Update to the latest version, try to apply your own options and override language - dictDefaultMessage.

[vrajroham]

We Apologize for inconvenience @janperse . We recently update the component to address all the options from dropzone and to overcome other issues too. I'll have look on it.

[janperse]

No problem, let me know if you'll get the same bug and if it's fixed so i can update a project. Thanks!

[vrajroham]

@janperse Can you post your code which is causing above mentioned error? Actually it seems hard to reproduce the same, with your code I can assist you better.

[ellefsen]

<dropzone
    id="dropzone-upload"
    url="https://example.com/api/upload-image"
    v-on:vdropzone-success="showSuccess"
    :preview-template="template"
    :useCustomDropzoneOptions="true"
    :dropzoneOptions="{
        dictDefaultMessage: '<span class=\'icon icon-upload\'></span><br/>Dra filer hit for å laste opp',
        headers: {
            Authorization: authHeader
        },
        showRemoveLink: false,
        acceptedFileTypes: 'image/*'
    }"
    :maxFileSizeInMB="10"
    :createImageThumbnails="false"
>
</dropzone>

I have the exact same issue as above. This is my markup when calling the component within another component. In my case the dictDefaultMessage is never read.

[vrajroham]

@ellefsen Change your component to as below. You need to add dictDefaultMssage under language key. Give shot to following code and let me know if same issue persists.

Note : Also no need to provide icon in default message now. :tada:

<dropzone
    id="dropzone-upload"
    url="https://example.com/api/upload-image"
    v-on:vdropzone-success="showSuccess"
    :preview-template="template"
    :useCustomDropzoneOptions="true"
    :dropzoneOptions="{
        language: {
            dictDefaultMessage: '<span class=\'icon icon-upload\'></span><br/>Dra filer hit for å laste opp'
        },
        headers: {
            Authorization: authHeader
        },
        showRemoveLink: false,
        acceptedFileTypes: 'image/*'
    }"
    :maxFileSizeInMB="10"
    :createImageThumbnails="false"
>
</dropzone>

[ellefsen]

Perfect. That did it for me this time. From the docs I would read it as if language should be a separate prop instead of being a part of the dropzoneOptions object. I found that a bit confusing.

See vue-dropzone/README.md - line 72

[DougHayward]

The language wrapper is no longer needed or valid. It is now simply:

dropzoneOptions: {
  dictDefaultMessage: 'Drop a PDF file here, or click to select a file to upload.'
}

Providing the language wrapper causes the entire thing to be ignored.

187