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

Question

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

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

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);

您可以在此处阅读有关扩展客户端元素以及将 DOM 事件映射到 Java 的更多信息。