Vue-dropzone: Can one nest dropzone in other forms?

[zhangzhen]

If one cannot nest dropzone into other forms, what does he then do if dropzone is a part of other forms?

Cheers,
Zhen

[vrajroham]

Hi @zhangzhen, I'm bit confused about your question. Can you elaborate more, like how are doing it or how you want to do it?

Behind the scenes Dropzone is a form as we are passing the url as a prop to component.

Edit

As far answer to your question Can one nest dropzone in other forms?
Yes you can nest it in other forms.

[zhangzhen]

I want to do the following:

<form ...>
  <input ...>
  <input ...>
  <dropzone ...></dropzone>
</form>

As far as I know, a form cannot nest another form. How can I deal with this issue?

Regards,
Zhen

[crispinheneise]

According to the Dropzone documentation, it is possible to create dropzones on non-form elements.

Could the vue-dropzone template be changed to accept a param for the element instead of hard-coding a form element? https://github.com/rowanwins/vue-dropzone/blob/vue2/src/index.vue#L2

[vrajroham]

@mysmallidea Really good suggestion! But most of the users are using previous feature like slots etc. so can't change it directly. Will surely have a look on it!
Thanks

[lgt]

I'm searching as well a solution to add dropzone inside existing form and send images on form submit along other parameters. Is there already a workaround for this?

[rowanwins]

Hi @lgt

It'll be a little while before this component supports this as it will need a fair bit of work.

[crispinheneise]

I haven't tried this yet, but it might be done pretty easily by passing a param to the is directive:

<template>
    <form :action="url" class="vue-dropzone dropzone" :id="id" :is="elementType">
        <slot></slot>
    </form>
</template>

See
https://jsfiddle.net/8nwdypvj/4/
https://forum.vuejs.org/t/conditional-root-element-name/13133

[justrhysism]

Yeah I'm not sure why this component needs to add a <form> element. I cannot see any valid reason why this is so. It renders it completely unusable for those who need to include a file uploader within a form.

[rowanwins]

The valid reason @justrhysism is that I wasn't thinking about everyone else's use case when I wrote the component, I was doing it for my purposes and it suited me just fine, it was only afterwards that I released it for others to use :)

Anyway this is being addressed in a version 3 release that we're currently working on.

[rowanwins]

Hi @zhangzhen

Version 3 is now released which now doesn't use a form as a wrapper. Check out the new docs.

[iamsajidjaved]

I hope this video will answer your question: https://youtu.be/y8ykRE1pChI
This channel has very good content related to this vue component. This issue is covered in this video