fileStorageUploadField 文件存储上传

fileStorageUploadField 支持用户将文件上传至 Jmix 文件存储。

XML 元素

fileStorageUploadField

Java 类

FileStorageUploadField

基本用法

这个组件可以包含标题、已上传文件的链接和一个上传按钮。当点击上传按钮的时候,会弹出标准的文件选择器,用户可以在这里选择需要上传的文件。

fileStorageUploadField 既可以 绑定实体属性,也可以不绑定数据。

下面的示例我们展示在没有数据绑定的情况下使用组件。可以用来直接处理上传的文件,而无需将其与任何 Jmix 实体关联。

<fileStorageUploadField id="fileRefField"
                        acceptedFileTypes=".txt, .csv"
                        fileStoragePutMode="MANUAL"
                        fileNameVisible="true"/>

可以直接在 FileUploadSucceededEvent 事件中处理上传的文件。

如需以字节数组的格式在实体属性保存文件,而不是 FileRef,那么请使用 fileUploadField 组件。

如需同时上传多个文件,请使用 upload 组件。

fileStorageUploadField 在内部使用了 Vaadin 的 UploadHandler API。上传的文件会立即保存在默认的 FileStorage 中。如需以编程的方式控制文件的存储,可以使用 fileStoragePutMode 属性。

数据感知的 fileStorageUploadField

fileStorageUploadField 支持用户上传文件至 文件存储 并作为一个 FileRef 对象设置给实体属性。

下面例子中,User 实体的 picture 属性是 FileRef 类型。

@Column(name = "PICTURE", length = 1024)
private FileRef picture;
XML
<data>
    <instance id="documentDc" class="io.jmix.uisamples.entity.Document">
    </instance>
</data>
<layout>
    <fileStorageUploadField id="fileStorageUploadField" label="Select File"
                            dataContainer="documentDc" property="content"
                            fileNameVisible="false"
                            dropAllowed="true"
                            maxFileSize="51200"
                            fileStoragePutMode="MANUAL"
    />
</layout>
Java
@ViewComponent
private FileStorageUploadField fileStorageUploadField;

@Autowired
private TemporaryStorage temporaryStorage;
@Autowired
private Notifications notifications;

// This handler is needed only when fileStoragePutMode="MANUAL".
// In AUTO mode the field automatically moves the uploaded file from temporary storage
// to the FileStorage and sets the returned FileRef to the entity attribute.
@Subscribe("fileStorageUploadField")
public void onFileStorageUploadFieldFileUploadSucceeded(
        final FileUploadSucceededEvent<FileStorageUploadField, TemporaryStorage.FileInfo> event) {
    UUID fileId = event.getData().getId();
    File file = temporaryStorage.getFile(fileId);

    if (file != null) {
        FileRef fileRef = new FileRef("tempStorage", file.getAbsolutePath(), file.getName());
        fileStorageUploadField.setValue(fileRef);
        notifications.create("Your file %s has been uploaded successfully.".formatted(event.getFileName()))
                .withThemeVariant(NotificationVariant.LUMO_PRIMARY)
                .show();

        // Remove the uploaded file.
        // In a real-world application you would move the file to FileStorage here using
        // the temporaryStorage.putFileIntoStorage() method.
        temporaryStorage.deleteFile(fileId);
    }
}

fileStorageUploadField 与 dataContainer 属性指定的数据容器关联;property 属性指向的实体属性显示在 fileStorageUploadField 中。

XML 属性

下面是 fileStorageUploadField 的特殊属性:

名称 描述 默认值

acceptedFileTypes

配置服务端能接收的文件类型。

—

clearButtonAriaLabel

设置清除按钮的 aria-label 属性。

—

clearButtonVisible

设置是否显示清除按钮。

false

connectingStatusText

设置当上传对话框连接后显示的状态文字。

—

dropAllowed

设置是否允许用户拖拽文件进行上传。

—

fileNameVisible

设置是否在上传按钮旁边显示上传的文件名。

—

fileNotSelectedText

设置当无选中文件时显示的文本。

—

fileStorageName

设置文件上传后保存的 文件存储 名称。

—

fileStoragePutMode

设置文件何时上传至文件存储的模式。

—

fileTooBigText

设置文件超出大小限制时显示的信息。

—

incorrectFileTypeText

设置文件类型不匹配时显示的信息。

—

maxFileSize

设置允许上传的最大文件大小,单位为字节。

—

processingStatusText

设置当上传文件正在处理时显示的状态文本。

—

remainingTimeText

设置显示剩余上传时间的文本。

—

remainingTimeUnknownText

设置当无法计算剩余上传时间时显示的文本。

—

uploadDialogCancelText

设置上传对话框中取消按钮的文本。

—

uploadDialogTitle

设置上传对话框的标题。

—

uploadIcon

设置上传按钮的图标。

—

uploadText

设置上传按钮显示的文本。

—

下面是 fileStorageUploadField 支持的其他通用属性:

事件和处理器

下面是 fileStorageUploadField 的特殊事件和处理器:

名称 描述

FileUploadFailedEvent

io.jmix.flowui.kit.component.upload.event.FileUploadFailedEvent 当底层 Upload 组件发出 FailedEvent 事件时发送。

FileUploadFileRejectedEvent

io.jmix.flowui.kit.component.upload.event.FileUploadFileRejectedEvent 当底层 Upload 组件发出 FileRejectedEvent 事件时发送。

FileUploadFinishedEvent

io.jmix.flowui.kit.component.upload.event.FileUploadFinishedEvent 当底层 Upload 组件发出 FinishedEvent 事件时发送。

FileUploadProgressEvent

io.jmix.flowui.kit.component.upload.event.FileUploadProgressEvent 当底层 Upload 组件发出 ProgressUpdateEvent 事件时发送。

FileUploadStartedEvent

io.jmix.flowui.kit.component.upload.event.FileUploadStartedEvent 当底层 Upload 组件发出 StartedEvent 事件时发送。

FileUploadSucceededEvent

io.jmix.flowui.kit.component.upload.event.FileUploadSucceededEvent 当底层 Upload 组件发出 SucceededEvent 事件时发送。

validator

验证组件值。

下面是 fileStorageUploadField 支持的其他通用事件:

XML 内部元素

一个 fileStorageUploadField 可以包含 tooltip 和 uploadIcon 作为其内部元素。