Блог

Главная - Вопросы по программированию - Событие добавления компонента загрузки Vaadin — файла

Событие добавления компонента загрузки Vaadin — файла

#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, '/.*')   ')

 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 здесь.


, 'i');

if(
!this.maxFilesReached
amp;amp; !(this.maxFileSize >= 0 amp;amp; file.size > this.maxFileSize)
amp;amp; !(this.accept amp;amp; !(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 :



Пример использования:




Вы можете прочитать больше о расширении клиентских элементов здесь и сопоставлении событий DOM с Java здесь.








	Метки: