Vaadin上传组件-文件添加事件

Question

有没有办法检测该文件是否已添加到上传组件？有一个file-remove来检测文件是否被删除，我们可以通过某种方式检测是否有文件被添加吗？

简化场景：添加文件时显示简单通知。

Answer 1

查看 https://github.com/vaadin/vaadin-upload/blob/master/src/vaadin-upload.html 后，vaadin-upload 元素无法做到这一点。

但是你可以扩展 UploadElement!

UploadElement 有一个名为 _addFile 的函数，每当添加文件时都会调用该函数。您只需确认相同的谓词（这有点低效，但确实如此），如果要添加文件，则触发一个新的自定义事件。

custom-vaadin-upload.js:

import {UploadElement} from '@vaadin/vaadin-upload/src/vaadin-upload';

class CustomUploadElement extends UploadElement {

  static get is() {
    return 'custom-vaadin-upload';
  }

  constructor() {
    super();
  }

  _addFile(file) {
    const fileExt = file.name.match(/\.[^\.]*$|$/)[0];
    const re = new RegExp('^(' + this.accept.replace(/[, ]+/g, '|').replace(/\/\*/g, '/.*') + ')$', 'i');

    if(
        !this.maxFilesReached
        && !(this.maxFileSize >= 0 && file.size > this.maxFileSize)
        && !(this.accept && !(re.test(file.type) || re.test(fileExt)))
    ) {
      this.dispatchEvent(new CustomEvent('file-accept', {detail: {file}}));
    }

    super._addFile(file);
  }

}

customElements.define(CustomUploadElement.is, CustomUploadElement);

CustomUpload.java:

@Tag("custom-vaadin-upload")
@JsModule("./src/custom-vaadin-upload.js")
public class CustomUpload extends Upload {

  public CustomUpload() {
    super();
  }

  public CustomUpload(final Receiver receiver) {
    super(receiver);
  }

  public Registration addFileAcceptListener(final ComponentEventListener<FileAcceptEvent> listener) {
    return addListener(FileAcceptEvent.class, listener);
  }

  @DomEvent("file-accept")
  public static class FileAcceptEvent extends ComponentEvent<CustomUpload> {

    private final JsonObject detail;

    private final JsonObject detailFile;

    public FileAcceptEvent(final CustomUpload source, final boolean fromClient,
        @EventData("event.detail") final JsonObject detail,
        @EventData("event.detail.file") final JsonObject detailFile) {
      super(source, fromClient);

      this.detail = detail;
      this.detailFile = detailFile;
    }

    public final JsonObject getDetail() {
      return detail;
    }

    public final JsonObject getDetailFile() {
      return detailFile;
    }

  }

}

用法示例：

final MemoryBuffer buffer = new MemoryBuffer();
final CustomUpload upload = new CustomUpload(buffer);

upload.addFileAcceptListener(System.out::println);

您可以阅读有关扩展客户端元素的更多信息here and mapping DOM events to Java here。

Vaadin上传组件-文件添加事件

Vaadin upload component - File added event

vaadin

vaadin-flow