fileStorageUploadField 文件存储上传
fileStorageUploadField 支持用户将文件上传至 Jmix 文件存储。
XML 元素 |
|
|---|---|
Java 类 |
|
基本用法
这个组件可以包含标题、已上传文件的链接和一个上传按钮。当点击上传按钮的时候,会弹出标准的文件选择器,用户可以在这里选择需要上传的文件。
fileStorageUploadField 既可以 绑定实体属性,也可以不绑定数据。
下面的示例我们展示在没有数据绑定的情况下使用组件。可以用来直接处理上传的文件,而无需将其与任何 Jmix 实体关联。
<fileStorageUploadField id="fileRefField"
acceptedFileTypes=".txt, .csv"
fileStoragePutMode="MANUAL"
fileNameVisible="true"/>
可以直接在 FileUploadSucceededEvent 事件中处理上传的文件。
|
如需以字节数组的格式在实体属性保存文件,而不是 如需同时上传多个文件,请使用 upload 组件。 |
fileStorageUploadField 在内部使用了 Vaadin 的 UploadHandler API。上传的文件会立即保存在默认的 FileStorage 中。如需以编程的方式控制文件的存储,可以使用 fileStoragePutMode 属性。
|
数据感知的 fileStorageUploadField
fileStorageUploadField 支持用户上传文件至 文件存储 并作为一个 FileRef 对象设置给实体属性。
下面例子中,User 实体的 picture 属性是 FileRef 类型。
@Column(name = "PICTURE", length = 1024)
private FileRef picture;
<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>
@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 的特殊属性:
| 名称 | 描述 | 默认值 |
|---|---|---|
配置服务端能接收的文件类型。 |
— |
|
设置清除按钮的 |
— |
|
设置是否显示清除按钮。 |
|
|
设置当上传对话框连接后显示的状态文字。 |
— |
|
设置是否允许用户拖拽文件进行上传。 |
— |
|
设置是否在上传按钮旁边显示上传的文件名。 |
— |
|
设置当无选中文件时显示的文本。 |
— |
|
设置文件上传后保存的 文件存储 名称。 |
— |
|
设置文件何时上传至文件存储的模式。 |
— |
|
设置文件超出大小限制时显示的信息。 |
— |
|
设置文件类型不匹配时显示的信息。 |
— |
|
设置允许上传的最大文件大小,单位为字节。 |
— |
|
设置当上传文件正在处理时显示的状态文本。 |
— |
|
设置显示剩余上传时间的文本。 |
— |
|
设置当无法计算剩余上传时间时显示的文本。 |
— |
|
设置上传对话框中取消按钮的文本。 |
— |
|
设置上传对话框的标题。 |
— |
|
设置上传按钮的图标。 |
— |
|
设置上传按钮显示的文本。 |
— |
下面是 fileStorageUploadField 支持的其他通用属性:
id - alignSelf - classNames - colspan - css - dataContainer - enabled - errorMessage - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - property - readOnly - required - requiredMessage - visible - width
事件和处理器
下面是 fileStorageUploadField 的特殊事件和处理器:
| 名称 | 描述 |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
验证组件值。 |
下面是 fileStorageUploadField 支持的其他通用事件:
XML 内部元素
一个 fileStorageUploadField 可以包含 tooltip 和 uploadIcon 作为其内部元素。