vaadin - Vaadin 10 - 上传组件 - 删除文件事件

Question

上传文件时，会启用一个 Button：

// myUploadComponent extends Upload
myUploadComponent.addSucceededListener(event -> enabledMyButtonMEthod ()); // working well

删除文件时，我不知道如何禁用该按钮（单击它旁边的叉号）。

应该有类似'addRemoveListener'的东西......？我怎样才能检测到这个事件？

Answer 1

您可以在上传组件中收听“文件删除”事件。这是一个例子。

@Route("")
public class MainView extends VerticalLayout {

    public MainView() { 
        MyUpload upload = new MyUpload();
        upload.addFileRemoveListener(e -> Notification.show("Button disabled"));
        add(upload);
    }

    class MyUpload extends Upload {
        Registration addFileRemoveListener(ComponentEventListener<FileRemoveEvent> listener) {
            return super.addListener(FileRemoveEvent.class, listener);
        }
    }

    @DomEvent("file-remove")
    public static class FileRemoveEvent extends ComponentEvent<Upload> {
        public FileRemoveEvent(Upload source, boolean fromClient) {
            super(source, fromClient);
        }
    }
}

Answer 2

我会尝试在文件名更改事件public Registration addChangeListener(Upload.ChangeListener listener)上触发哪个

Answer 3

我已经像这样添加了事件监听器

upload
  .getElement()
  .addEventListener(
    "file-remove",
    event -> {
      JsonObject eventData = event.getEventData();
      String fileName = eventData.getString("event.detail.file.name");
      // ...
    }).addEventData("event.detail.file.name");

在这里找到解决方案：https ://github.com/vaadin/vaadin-upload/issues/347#issuecomment-516292999

Answer 4

我已经扩展了 Tulio 的解决方案以在 FileRemoveEvent 中获取已删除的文件名。非常方便！

private class MyUpload extends Upload {
    public MyUpload(MultiFileMemoryBuffer buffer) {super(buffer);}

    Registration addFileRemoveListener(ComponentEventListener<FileRemoveEvent> listener) {
        return super.addListener(FileRemoveEvent.class, listener);
    }
}

@DomEvent("file-remove")
public static class FileRemoveEvent extends ComponentEvent<Upload> {
    private String fileName;

    public FileRemoveEvent(Upload source, boolean fromClient, @EventData("event.detail.file.name") JreJsonString fileNameJson) {
        super(source, fromClient);
        fileName = fileNameJson.getString();
    }

    public String getFileName() {
        return fileName;
    }
}