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

【问题标题】：Vaadin upload component - File added eventVaadin 上传组件 - 文件添加事件
【发布时间】：2021-10-25 12:49:15
【问题描述】：

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

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

【问题讨论】：

标签： vaadin vaadin-flow

【解决方案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 和将 DOM 事件映射到 Java here。

【讨论】：