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

Question

上传文件时，启用按钮：

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

我没有找到如何在删除文件时禁用该按钮（单击它旁边的叉号）。

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

Answer 1

我会尝试 public Registration addChangeListener(Upload.ChangeListener listener) 应该在 filename change event

上触发

Answer 2

您可以在上传组件中监听"file-remove"事件。这是一个例子。

@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 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;
    }
}

Answer 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

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

Vaadin 10 - Upload Component - remove file event

vaadin

vaadin10