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

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]

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.

[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