upload

upload позволяет пользователям загружать один или несколько файлов. Он отображает ход загрузки и состояние каждого файла. Файлы можно загрузить, нажав кнопку Загрузить файлы или перетащив их на компонент.

XML-элемент

upload

Java-класс

JmixUpload

Основы

ДЕМО

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

<upload id="upload"
        dropAllowed="true"
        maxFileSize="10000"
        uploadHandlerType="IN_MEMORY"
        maxFiles="3"
/>

Автозагрузка

Атрибут autoUpload определяет, должны ли файлы загружаться автоматически сразу после выбора или же пользователю необходимо явно инициировать загрузку.

  • Если значение true, файлы загружаются сразу после выбора. Отображается индикатор прогресса загрузки, и пользователь может отменить загрузку, если это необходимо.

  • Если значение false, файлы не загружаются автоматически. Пользователю необходимо нажать кнопку Upload, чтобы запустить процесс загрузки.

Значение по умолчанию - true.

Drag & Drop

Компонент upload поддерживает функциональность перетаскивания, позволяя пользователям загружать файлы, просто перетаскивая их из своей файловой системы и сбрасывая на компонент.

Перетаскивание файлов включено по умолчанию. Чтобы отключить его, установите атрибут dropAllowed в значение false.

Атрибут dropLabel позволяет настроить сообщение, которое подсказывает пользователям сбросить файлы в область загрузки.

Значение атрибута может быть либо самим текстом, либо ключом в пакете сообщений. В случае ключа, значение должно начинаться с префикса msg://.

Атрибут dropLabelIcon позволяет указать иконку, который будет отображаться вместе с текстом dropLabel.

<upload dropLabel="Drop files here to upload"
        dropLabelIcon="vaadin:cloud-upload-o"/>

Лимит файлов

ДЕМО

По умолчанию upload не имеет ограничения на количество загружаемых файлов. Вы можете установить ограничение на количество файлов, используя атрибут maxFiles.

Этот атрибут задаёт максимальное количество файлов для загрузки. Если значение установлено в единицу, то стандартный файловый браузер не позволит выбрать несколько файлов.

Исключения, которые возникают, по умолчанию не отображаются в пользовательском интерфейсе. Используйте событие FileRejectedEvent для перехвата этих исключений и, например, уведомление, чтобы проинформировать пользователя о проблеме.

@Autowired
private Notifications notifications;
@Subscribe("upload")
public void onUploadFileRejected(final FileRejectedEvent event) {
    notifications.create(event.getErrorMessage())
            .withThemeVariant(NotificationVariant.WARNING)
            .withDuration(5000)
            .show();
}

Атрибуты

upload имеет следующие уникальные атрибуты:

Имя Описание По умолчанию

acceptedFileTypes

Задаёт допустимые типы файлов.

—

autoUpload

Устанавливает, разрешает ли компонент начинать загрузку сразу после выбора файлов. См. Auto-Upload.

true

dropAllowed

Определяет, могут ли пользователи перетаскивать файлы в область загрузки.

—

dropLabel

Указывает метку удаления, которая будет отображаться как сообщение пользователю о необходимости удаления файлов в компоненте upload. См. Перетаскивание.

—

dropLabelIcon

Устанавливает значок для метки перетаскивания. Значок отображается, когда пользователь может перетаскивать файлы в этот компонент upload. См. Перетаскивание.

—

maxFileSize

Задаёт максимальный размер файла.

—

maxFiles

Указывает максимальное количество файлов для загрузки. См. Количество файлов.

unlimited

uploadHandlerFqn

Устанавливает полное имя реализации пользовательского обработчика загрузки для этого компонента upload. Класс должен реализовывать интерфейс UploadHandler Vaadin. Пример значения: * com.company.app.upload.CustomUploadHandler

—

uploadHandlerType

Указывает тип встроенного обработчика загрузки. Возможные значения: * IN_MEMORY – сохраняет загруженные данные в памяти с помощью InMemoryUploadHandler. В UploadSucceededEvent<V> загруженные данные доступны как byte[]. * FILE_TEMPORARY_STORAGE Сохраняет загруженные файлы в временное хранилище.

IN_MEMORY

uploadIcon

Задаёт значок загрузки.

—

uploadText

Задаёт текст загрузки.

—

upload имеет следующие общие атрибуты:

id - alignSelf - classNames - colspan - css - enabled - height - maxHeight - maxWidth - minHeight - minWidth - visible - width

Обработчики

upload имеет следующие уникальные обработчики:

Имя Описание

AllFinishedEvent

com.vaadin.flow.component.upload.AllFinishedEvent отправляется, когда upload обработал все файлы в своей очереди на загрузку, независимо от того, были ли все приемы успешными или нет.

FailedEvent

com.vaadin.flow.component.upload.FailedEvent отправляется при получении upload, но прием по какой-то причине прерывается. Используйте addUploadFailedListener() в коде Java.

FileRejectedEvent

com.vaadin.flow.component.upload.FileRejectedEvent отправляется, когда выбранный файл не соответствует ограничениям, указанным в upload, например, ограничение размера файла или ограничение количества файлов. См. Количество файлов.

FileRemovedEvent

com.vaadin.flow.component.upload.FileRemovedEvent отправляется, когда файл удаляется из очереди загрузки.

FinishedEvent

com.vaadin.flow.component.upload.FinishedEvent отправляется, когда upload получает файл, независимо от того, был ли прием успешным или неудачным. Используйте addUploadFinishedListener() в коде Java.

ProgressUpdateEvent

com.vaadin.flow.component.upload.ProgressUpdateEvent отправляется для отслеживания хода загрузки. Используйте addUploadProgressListener() в коде Java.

StartedEvent

com.vaadin.flow.component.upload.StartedEvent отправляется, когда upload начинает приём. Используйте addUploadStartedListener() в Java-коде или подпишитесь на событие компонента в контроллере экрана.

UploadSucceededEvent

Запускается после успешной загрузки файла. Событие предоставляет загруженные данные через getData().

upload имеет следующие общие обработчики:

AttachEvent - DetachEvent

Элементы

Компонент upload может содержать следующие вложенные элементы: uploadIcon и dropLabelIcon.

Смотрите также