Vue-dropzone: Every time the page with dropzone is visited, a new input element for file upload is created.

[zhangzhen]

A "create a new task" page has a dropzone element. Every time the page is visited, a new input element for file upload is created.

<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;">
<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;">

How the duplication is avoided?

Cheers,
Zhen

[rowanwins]

Hi @zhangzhen

Currently the element is created using the mounted event which if you're using a single page app or something with lots of tabs etc might be resulting in the duplication i think.

We could possibly move the creation to the created lifecycle event.... this would possibly get around the duplication issue.

At the moment there is no real way to control this.

[stoked74]

I noticed this issue earlier on my site. I had about 20 hidden elements in the DOM from navigating back and forth to pages with dz's.

Can you add the below code to the components destroyed method? This solved it for me on the views that use dropzone.

document.querySelectorAll('input.dz-hidden-input').forEach(function (elem) { elem.parentNode.removeChild(elem) })

Best,
Sam

[rowanwins]

Thanks for the suggestion @stoked74 - we'll see if we can with this in