File drop in Vaadin 14+

Flow
1

Vaadin 8 had the FileDropTarget API that allowed a component to receive a file dropped from outside the browser. I tried implementing the same in Vaadin 14 using the DropTarget interface but while it does accept the file, the DropEvent does not contain any information at all on the file that the user dragged onto the element. It seems that DropTarget is only meant to be used with a matching DragSource for the dragged component, and not something outside of that.

How can I implement functionality similar to Vaadin 8’s FileDropTarget in Vaadin flow/14+? I searched for a while but I could not find any information on this.

2

[Upload]
(https://vaadin.com/components/vaadin-upload/java-examples) component supports file dropping.

There is full example of how to use it here:

https://github.com/TatuLund/devday-demo-flow/blob/master/src/main/java/com/vaadin/devday/demo/views/UploadView.java

3

Hi Tatu, thanks for the reply. I am already using Upload but as far as I can tell it only supports drop within its own component. I’d like to extend an existing component, a Grid for example, to allow it to receive the dropped file, just like the FileDropTarget in Vaadin 8. Is there something other than the Upload component, or any way to get the Upload component to behave the same way? I noticed that I would be able to set the label for the Upload component to be something else but I don’t think this would work for something bigger such as a Grid.

4

Here’s what I ended up using. In the constructor of my class which extends ViewLayout:

getElement().executeJs("$0.addEventListener('dragenter', function(e) {uploadObj = $1; $1.click();e.stopPropagation(); e.preventDefault(); }, false);",
	getElement(), uploadButton.getElement());

So as soon as the file starts dragging on top of the component it will show the upload dialog (obtained through clicking the upload button) and the user will naturally drag the file there since it says “Drop file here”. Not the same functionality as Vaadin 8 and it feels like a hack but it works nonetheless.

5

Did you find a better solution in the meanwhile?

6

At least you can style the Upload to make it an “invisible” wrapper of any component: https://cookbook.vaadin.com/large-upload-area