How to highlight multiple components for drag and drop file upload


I’m using Vaadin to build my front-end and I want to upload files by simply dragging them from the desktop into the browser.

There are several components that can receive the file on the same page. So I used the DragAndDropWrapper on these components and implemented the DropHandler. When the user drags the file over one of the components, its style changes.

But I also would like the styles of all the components that can receive the file to get changed when a file is dragged over areas that cannot receive it, this way indicating the places the user can drop the file. Meanwhile, if the file is dragged over a receptor component only the style of this component should change again.

Is it possible to implement this using only Vaadin? Or JavaScript?