Uppy: Is it possible to make the whole Drag n Drop clickable, instead of just the browse text?

[Freddie-Pike]

I want to customize the drag and drop area in Uppy to look something like this:

There's two issues with this currently:

1. I need to add in the icon and add in the custom text through multiple div as there's multiple lines of text of varying styles. I can't implement that by changing the locale string. So my (hacky) solution to this is to add all this HTML through DOM manipulation by adding in some new divs positioned absolutely over the div. This feels wrong to do with React, so even though this issue doesn't relate to this, I'm open to another suggestion here haha.

2. I want the "Browse Files" button to be "fake" in the sense that if the user clicks anywhere in the dashed area the system file browser will pop up. I can change the text for this using the dropPaste but I unfortunately can't set the clickable field.

Does anyone knows how to change the whole drag and drop area to be clickable? I'd be willing to look into creating a custom plugin to do this, but creating a custom plugin appears to be more for adding a new UI element rather than customizing what's already available.

[arturi]

Hi! We are considering making the whole DragDrop area clickable, although that would prevent us from adding “paste file” capabilities to DragDrop.

As for customizing the look of DragDrop beyond CSS, yeah, forking it and creating your own version of a plugin would be the way to go. I’d wait a bit with that, since there’s a PR open that refactors how DragDrop works internally a bit: https://github.com/transloadit/uppy/pull/1565

[kvz]

Just adding to this, we're also considering to add a DropPasteTarget plugin, you could then target e.g. Dashboard or 'body' or your own HTML element's by CSS selector to make Uppy accept drops and pastes. That could perhaps tackle your issue, would you agree? We don't have any ETA for this yet, it's just in the early planning/discussing phase.

[Freddie-Pike]

Hi! We are considering making the whole DragDrop area clickable, although that would prevent us from adding “paste file” capabilities to DragDrop.

As for customizing the look of DragDrop beyond CSS, yeah, forking it and creating your own version of a plugin would be the way to go. I’d wait a bit with that, since there’s a PR open that refactors how DragDrop works internally a bit: #1565

Sounds good. I feel like forking the DragDrop may be a bit out of my usecase ATM since doing merges into the plugin may be a bit difficult. It's good to know that the capability has been discussed though.

Just adding to this, we're also considering to add a DropPasteTarget plugin, you could then target e.g. Dashboard or 'body' or your own HTML element's by CSS selector to make Uppy accept drops and pastes. That could perhaps tackle your issue, would you agree? We don't have any ETA for this yet, it's just in the early planning/discussing phase.

Awesome! I am using React with Uppy currently. So I'm guessing it would be possible create a "DragAndDropZone" component featuring the styling above, and then I pass in the id to the "DragAndDropZone" component as a target to this new DropPasteTarget plugin and it would render my own custom html and css and make that whole area clickable? If so, then I think that's exactly what I am looking for as it'll enable to make my own custom styling like the image above. Is there an issue up for that yet that I can subscribe to?

[arturi]

Yeah, we were thinking something along those lines. No issue to subscribe to yet, but I’ll add a reference to this issue to our backlog and try to ping you once we have something!

[thirsch]

Just adding to this, we're also considering to add a DropPasteTarget plugin, you could then target e.g. Dashboard or 'body' or your own HTML element's by CSS selector to make Uppy accept drops and pastes. That could perhaps tackle your issue, would you agree? We don't have any ETA for this yet, it's just in the early planning/discussing phase.

@kvz We'd love to be able to use the Dashboard inline but have the whole body as the Drop zone. Will this be possible with the DropPasteTarget plugin?

[arturi]

We'd love to be able to use the Dashboard inline but have the whole body as the Drop zone. Will this be possible with the DropPasteTarget plugin?

That is our intention for that plugin, yes.