Question

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

// 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

我会尝试select a.ProductId, a.Version, IsAvailable, IsShippable from tableA a full outer join tableB b on a.productid =b.productid and a.version=b.version，这应该在filename change event上触发

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-上传组件-删除文件事件

4 个答案: