vue-dropzone icon indicating copy to clipboard operation
vue-dropzone copied to clipboard

Setting dropzone element to document.body

Open bruno-fernandes opened this issue 7 years ago • 4 comments
trafficstars

Hi,

Is there an option to set the dropzone element to document.body(or any other dom element using id/class) so drop anywhere is supported?

// https://github.com/rowanwins/vue-dropzone/blob/237ccc7a562bd5a218c8370c301d9f654796bed9/src/components/vue-dropzone.vue#L189
// when Dropzone is initialized it seems to set it always to a child element
this.dropzone = new Dropzone(this.$refs.dropzoneElement, this.dropzoneSettings)

This is an example using Dropzone without vue-dropzone: https://github.com/enyo/dropzone/wiki/Make-the-whole-body-a-dropzone

bruno-fernandes avatar Mar 16 '18 13:03 bruno-fernandes

Hmm unfortunately that's not currently possible with this component and I highly doubt we'd ever support it given that it's such a specific use case, but I'll give it a bit of thought before I close the issue

rowanwins avatar Mar 17 '18 00:03 rowanwins

It would be very nice to see this implemented as it's a common feature on file uploaders. On vanilla dropzone you can achieve this by passing the element you want dropzone to attach to as the first parameter like @bruno-fernandes mentioned.

Pitu avatar May 20 '18 07:05 Pitu

@rowanwins Drag & Drop support on page body is a must have... see google photos. Much better user experience! Just pass the body element as first parameter to dropzone...

divdax avatar Mar 16 '19 21:03 divdax

@rowanwins Just allow us to set this line as document.body, and its fixed.

Example: https://www.dropzonejs.com/bootstrap.html

bcalik avatar May 23 '20 01:05 bcalik