fileUploadField

fileUploadField загружает файл в память в виде массива байтов.

XML-элемент

fileUploadField

Java-класс

FileUploadField

Основы

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

fileUploadField может работать как без привязки к атрибуту сущности, так и с привязка данных.

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

<fileUploadField id="fileUploadField"
                 clearButtonVisible="true"
                 fileNameVisible="true"
                 dropAllowed="true"
                 acceptedFileTypes=".pdf, .jpeg, .jpg, .png, .doc, .docx"
                 maxFileSize="921600"
                 label="msg://fileUploadField.label"
                 helperText="msg://fileUploadField.helperText"
                 fileTooBigText="msg://fileUploadField.fileTooBigText"/>

Теперь вы можете обрабатывать загруженный файл непосредственно в обработчике события FileUploadSucceededEvent:

@Autowired
private Notifications notifications;

@Subscribe("fileUploadField")
public void onFileUploadFieldFileUploadSucceeded(final FileUploadSucceededEvent<FileStorageUploadField, byte[]> event) {
    notifications.create("Your file %s has been uploaded successfully.".formatted(event.getFileName()))
            .withThemeVariant(NotificationVariant.LUMO_PRIMARY)
            .show();
}
Внутренне fileUploadField использует Vaadin API UploadHandler и сохраняет загруженный файл в памяти как массив байтов. Физический файл в файловой системе не создаётся, поэтому такой подход лучше всего подходит для небольших файлов, не требующих постоянного хранения.

Для загрузки и сохранения больших файлов рекомендуется использовать компонент fileStorageUploadField.

Для одновременной загрузки нескольких файлов следует использовать компонент upload вместо fileUploadField.

fileUploadField связанный с данными

ДЕМО

fileUploadField позволяет пользователям сохранять загруженный файл в атрибуте сущности в виде массива байтов.

В примере ниже атрибут document сущности User имеет тип массива байтов.

@Column(name = "DOCUMENT")
private byte[] document;
<data>
    <instance id="pictureDc" class="io.jmix.uisamples.entity.Picture">
    </instance>
</data>
<layout>
    <fileUploadField id="fileUploadField" label="Select File"
                     dataContainer="pictureDc" property="content"
                     clearButtonVisible="true"
                     fileNameVisible="true"
                     dropAllowed="true"
                     maxFileSize="51200"
                     acceptedFileTypes="image/png,image/jpeg"
    />
</layout>

fileUploadField имеет ссылку на контейнер, указанный в атрибуте dataContainer; атрибут property содержит имя атрибута сущности, который отображается в fileUploadField.

Чтобы сохранить файл в файловом хранилище и связать его с сущностью как FileRef, используйте компонент fileStorageUploadField.

Атрибуты

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

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

acceptedFileTypes

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

—

clearButtonAriaLabel

Устанавливает метку арии кнопки очистки.

—

clearButtonVisible

Определяет, отображается ли в поле кнопка очистки.

false

connectingStatusText

Устанавливает текст состояния соединения.

—

dropAllowed

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

—

fileName

Устанавливает текст, который должен отображаться, если значение задано из контейнера данных.

—

fileNameVisible

Управляет отображением выбранного имени файла.

—

fileNotSelectedText

Устанавливает невыбранный текст файла.

—

fileTooBigText

Устанавливает в файле слишком большой текст.

—

incorrectFileTypeText

Устанавливает неправильный текст типа файла.

—

maxFileSize

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

—

processingStatusText

Устанавливает текст статуса обработки.

—

remainingTimeText

Устанавливает текст оставшегося времени.

—

remainingTimeUnknownText

Устанавливает оставшееся время неизвестного текста.

—

uploadDialogCancelText

Устанавливает текст отмены диалога загрузки.

—

uploadDialogTitle

Устанавливает заголовок диалога загрузки.

—

uploadIcon

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

—

uploadText

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

—

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

id - alignSelf - classNames - colspan - css - dataContainer - enabled - errorMessage - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - property - readOnly - required - requiredMessage - visible - width

Обработчики

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

Имя Описание

FileUploadFailedEvent

Запускается при сбое загрузки файла.

FileUploadFileRejectedEvent

Вызывается, когда выбранный файл отклонен, поскольку он нарушает ограничение загрузки.

FileUploadFinishedEvent

Запускается после завершения загрузки.

FileUploadProgressEvent

Запускается при изменении хода загрузки.

FileUploadStartedEvent

Вызывается при начале загрузки файла.

FileUploadSucceededEvent

io.jmix.flowui.kit.component.upload.event.FileUploadSucceededEvent запускается, когда компонент Upload запускает SucceededEvent.

validator

Проверяет значение компонента.

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

AttachEvent - ComponentValueChangeEvent - DetachEvent - statusChangeHandler

Элементы

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