Vaadin 10 - 上传组件 - 删除文件事件答案

【问题标题】：Vaadin 10 - Upload Component - remove file eventVaadin 10 - 上传组件 - 删除文件事件
【发布时间】：2019-01-30 10:21:16
【问题描述】：

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

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

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

应该有类似'addRemoveListener'的东西......？如何检测此事件？

【问题讨论】：

标签： vaadin vaadin10

【解决方案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);
        }
    }
}

【讨论】：

【解决方案2】：

我会尝试public Registration addChangeListener(Upload.ChangeListener listener)，它应该在filename change event 上触发

【讨论】：

【解决方案3】：

我已经扩展了 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;
    }
}

【讨论】：

【解决方案4】：

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

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

【讨论】：