Vaadin 14 Upload - how to catch event when user clicks Cancel button in choose file dialog

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.

Maybe you can find something useful from https://stackoverflow.com/questions/4628544/how-to-detect-when-cancel-is-clicked-on-file-input - it's not going to be trivial. — ollitietavainen, Mar 30 '20 at 11:05

score 0 · Accepted Answer · answered Mar 31 '20 at 02:37

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.

Thank you for your answer. I agree, if nothing happens, no event should be fired on the server side. But it's just seems that disableOnClick button attribute not working quite well with Upload component. Button is disabled after click on the client side, but cannot be enabled again. — SapogaN, Apr 01 '20 at 10:15
@SapogaN I suggest you post another Question, based on the specifics of your comment. Ask something like "How to enable a disableOnClick button with the Upload component after user cancels the file-picker dialog". — Basil Bourque, Apr 01 '20 at 14:18
the fact that the upload is disabled after all of this is a bug and should be resolved by vaadin. The fact that no event exists for cancelling file selection is not a bug. You should open an issue about disableOnClick not working as intended when cancelling. As a workaround, I can imagine you could disable the upload manually inside one of the listeners, maybe in the startedListener? — kscherrer, Apr 03 '20 at 14:10
@kscherrer If you run my example code, you’ll see that none of those events fire when you click the download widget and then cancel the file-picker dialog that appears. Perhaps there are other events that fire? — Basil Bourque, Apr 03 '20 at 14:47
No I'm on your side here, I know none of those events fire (and i don't think there are more events that you can listen to in the java api of `Upload`). I actually suspect that the file chooser window is not something even the webcomponent has access to so there will never be such an event to listen to (citations needed). OP would be better off not to use disable-on-click of the upload, while it is implemented like this. vaadin needs to change the functionality of disableOnClick so it will disable in the startedListener instead of when it's clicked, just because there is no cancel-picker event — kscherrer, Apr 03 '20 at 15:42

Vaadin 14 Upload - how to catch event when user clicks Cancel button in choose file dialog

1 Answers1

Behavior confirmed

Feature, not a bug