Vaadin 14 Upload - 如何在用户单击选择文件对话框中的“取消”按钮时捕获事件

Question

I've tried all existing listeners, but no one can catch this type of event.

Button uploadButton = new Button("Choose a file");
uploadButton.setDisableOnClick(true);
Upload upload = new Upload();
upload.setUploadButton(uploadButton);

User clicks uploadButton, button now disabled. Then in system choose file dialog user clicks Cancel button instead of choosing a file. Dialog is closed, no event is fired, uploadButton still disabled. I want to catch event when Cancel button is pressed and enable uploadButton.

Answer 1

Behavior confirmed

I can confirm the behavior you saw: No events seem to fire when user cancels the file-picker dialog.

Here is an example app in Vaadin 14.1.21. I added listeners for several of the event types.

package work.basil.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.upload.*;
import com.vaadin.flow.component.upload.receivers.MemoryBuffer;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

import java.time.Instant;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
@CssImport ( "./styles/shared-styles.css" )
@CssImport ( value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field" )
public class MainView extends VerticalLayout
{

    public MainView ( )
    {
        MemoryBuffer buffer = new MemoryBuffer();
        Upload upload = new Upload( buffer );

        upload.addStartedListener( ( StartedEvent event ) -> System.out.println( event.getClass().getCanonicalName() + " happened " + Instant.now() ) );

        upload.addSucceededListener( ( SucceededEvent event ) -> System.out.println( event.getClass().getCanonicalName() + " happened " + Instant.now() ) );

        upload.addFinishedListener( ( FinishedEvent event ) -> System.out.println( event.getClass().getCanonicalName() + " happened " + Instant.now() ) );

        upload.addAllFinishedListener( ( AllFinishedEvent event ) -> System.out.println( event.getClass().getCanonicalName() + " happened " + Instant.now() ) );

        upload.addProgressListener( ( ProgressUpdateEvent event ) -> System.out.println( event.getClass().getCanonicalName() + " happened " + Instant.now() ) );

        upload.addFileRejectedListener( ( FileRejectedEvent event ) -> System.out.println( event.getClass().getCanonicalName() + " happened " + Instant.now() ) );

        upload.addFailedListener( ( FailedEvent event ) -> System.out.println( event.getClass().getCanonicalName() + " happened " + Instant.now() ) );

        upload.addFileRejectedListener( ( FileRejectedEvent event ) -> System.out.println( event.getClass().getCanonicalName() + " happened " + Instant.now() ) );


        this.add( upload );
    }
}

Feature, not a bug

I consider this behavior a feature. If the user clicks the button to choose files, but cancels before completing that choice, nothing has really happened. No upload has been attempted. So no event should fire as nothing eventful has transpired.

Perhaps you should edit your Question to explain your interest in detecting the user having changed their mind about choosing files to upload. Perhaps there is a better solution to your ultimate goal.