Vaadin 14 Upload：如何捕获文件选择对话框取消按钮点击事件

这个场景我太熟悉了！Vaadin的Upload组件默认不会直接暴露“取消文件选择”的服务器端事件，但我们可以通过两种靠谱的方式来解决这个问题：

方案一：监听客户端file-dialog-closed事件（推荐） #

Vaadin的Upload Web Component在文件选择对话框关闭时（无论用户选了文件还是点击取消），都会触发file-dialog-closed事件。我们可以在服务器端给Upload添加这个客户端事件的监听器，精准控制按钮状态：

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

// 添加客户端对话框关闭事件监听器
upload.addClientListener("file-dialog-closed", event -> {
    // 只有当没有文件被选中时，才重新启用按钮
    if (upload.getFiles().isEmpty()) {
        uploadButton.setEnabled(true);
    }
});

这个方法的优势是完全贴合对话框关闭的时机：如果用户选了文件，Upload会自动进入上传流程，按钮保持禁用状态合理；如果用户取消选择，会立刻恢复按钮可用。

方案二：覆盖上传全生命周期事件（兼容老版本） #

如果你的Vaadin版本不支持addClientListener（比如Vaadin 10-13这类相对早期的版本），可以通过监听Upload的所有上传相关事件，再加上兜底检查来实现：

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

// 上传开始时保持按钮禁用（确保流程一致性）
upload.addStartedListener(event -> uploadButton.setEnabled(false));

// 上传完成、失败或文件被拒绝时，启用按钮
upload.addSucceededListener(event -> uploadButton.setEnabled(true));
upload.addFailedListener(event -> uploadButton.setEnabled(true));
upload.addFileRejectedListener(event -> uploadButton.setEnabled(true));

// 定时器兜底：按钮点击后1秒检查是否有文件被选中，防止极端情况
uploadButton.addClickListener(event -> {
    new UI().accessLater(() -> {
        if (upload.getFiles().isEmpty()) {
            uploadButton.setEnabled(true);
        }
    }, 1000);
});

这个方案通过覆盖所有可能的上传分支，再加上定时器兜底，虽然不如方案一优雅，但能兼容老版本的Vaadin。

内容的提问来源于stack exchange，提问作者SapogaN