Vaadin Upload displays error "Upload Forbidden" if a dialog is open

Flow
1

I try to upload a large ZIP using the Vaadin Upload. If the upload finishes while a dialog is open i get the following error:
grafik

Is it possible to fix that?

Bonus Question: Is it possible to directly upload to a remote server using the Vaadin Upload component in Flow? If so, are there any examples?

2

This is most likely related to the server-side modailty feature in Vaadin. This is a security feature that makes sure users cannot interact with components that are “behind” a modal dialog just by disabling the modailty curtain through the browser’s developer tools.

I guess we should adjust the upload handlig to explicitly bypass these checks specifically for the events that can happen after the upload has started (while still being strict with not starting an upload while the component is behind a modal dialog). Could you please file a ticket about this at GitHub · Where software is built.

As a workaround, you can disable the server-side modailty feature using the code snippet shown in this recent documentation PR: Add note and code example of disabling server modality by TatuLund · Pull Request #4404 · vaadin/docs · GitHub

3

I guess you could create your own simple component wrapper around the <vaadin-upload> web component. The main trick is to set the external URL as the target attribute of the upload element.

4

Thanks for the quick reply! Filed a bug report here: Vaadin Upload displays error "Upload Forbidden" if a dialog is open · Issue #21858 · vaadin/flow · GitHub
I will try your suggestion for a quick fix.

1 Like
5

Implemented around like this:

    private void fixDialogModalityIssues() {
        this.addOpenedChangeListener(e -> {
            if (e.isOpened()) {
                UI.getCurrent().add(this);
                UI.getCurrent().setChildComponentModal(this, false);
            } else {
                this.removeFromParent();
            }
        });
    }
1 Like
6

I set a shortcut on the escape key for each dialog to quickly close them. Now, with the implemented workound, if there is a second dialog above the first one and i press escape both dialogs are closed. Is there any way to workaround this? I just want the topmost dialog to be closed.

7

Modal dialogs should automatically close on Escape, unless you have disabled that: Dialog component | Vaadin components. The built-in logic should take care of only closing the top-most dialog.

1 Like
8

Removing my own escape shortcut fixed that. Thanks!