Vue-dropzone: Merge dropzoneOptions without "use-custom-dropzone-options"

[Luddinus]

Hi,

first of all, great package.

Anyway, what I want is to change the paramName using the defaults options too, is is possible?

<v-dropzone id="dz-photos" url="/api/upload"
    @vdropzone-success="photoUploaded"
    :thumbnail-width="144" :thumbnail-height="144"
    :headers="dzOptions.headers"
    :dropzone-options="dzOptions.paramName"
    :accepted-file-types="'.jpg,.jpeg,.png'"
    use-font-awesome></v-dropzone>

Thx.

[rowanwins]

Hi @Luddinus

To do this you'd need to do something like

````
@vdropzone-success="photoUploaded"
use-custom-dropzone-options="true"
:dropzone-options="dzOptions"

export default {
data (){
return {
dzoptions: {
paramName: 'something else'
acceptedFiles: '.jpg,.jpeg,.png'
}
}
}
}
````
Hope that helps, let me know how you get on

[rowanwins]

Also @liyu456 has just put through a pull request which adds paramName as a property which you can pass to the component so that might help. Im just in the midst of releasing a new version to NPM so I'll post a new version number when it's available

[Luddinus]

@rowanwins Thx,

but in your case, I think all the options are overrided, I would like to merge the options passed via "dz-options" and the default options of the package.

Is that the case or am I missunderstanding?

[rowanwins]

ah I think I see where you're heading @Luddinus

If I understand correctly you want to use some of the existing props but also merge in a custom options object that only contains a couple of params.

[Luddinus]

@rowanwins That's it.

[vrajroham]

@Luddinus I encountered same issue. I was able to solve it using setOption() method.

Add reference to your component using ref="" as below

<v-dropzone id="dz-photos" url="/api/upload"
    ref="mydz"
    @vdropzone-success="photoUploaded"
    :thumbnail-width="144" :thumbnail-height="144"
    :headers="dzOptions.headers"
    :accepted-file-types="'.jpg,.jpeg,.png'"
    use-font-awesome></v-dropzone>

I added ref="mydz" and removed dropzone-options from your component

Now you can change it as below,

this.$refs.mydz.setOption("paramName","your_file_name")  //your_file_name can be dynamic.

Above code will change only perticular option, it will not override all options. For updating multiple options, just duplicate above statement.

Hope it helps you!

[rowanwins]

I've decided the the setOption method is probably the best mechanism for this, it's quite explicit as to what is happening and will hopefully have less confusion compared to merging objects

[mazeeblanke]

the .setOption method is not working, i tried this but it not working
this.$refs.dropzone2.setOption('timeout', this.token); this.$refs.dropzone2.setOption('parallelUploads', '9090');

[vrajroham]

@mazeeblanke What errors are you getting? Could you provide the error logs?

[mazeeblanke]

@vrajroham okay its working, i thought the 'dropzoneOptions' computed property would reflect the newly added options. thanks

[jwbats]

@rowanwins How would you make dropzone options available to the dropzone vue component, without using 'export default'?

Not everybody uses node. I have no idea how to translate this into plain, vanilla js.