FileMultiUploadField 多文件上传

FileMultiUploadField - 多文件上传控件 支持用户上传文件至 临时存储。之后，可以在服务端文件系统以 File 对象进行处理或移至 文件存储。

用户点击时，系统自带的文件选择器会弹出，此时用户可以选择多个文件来上传。

file multi upload field

组件的 XML 名称：fileMultiUpload。

基本用法

示例：

在界面的 XML 描述中声明这个组件：

<fileMultiUpload id="fileMultiUploadField"
                 caption="Upload"/>
(1)
@Autowired
private FileMultiUploadField fileMultiUploadField;
@Autowired
private TemporaryStorage temporaryStorage;
@Autowired
private Notifications notifications;

@Subscribe
public void onInit(InitEvent event) {
    (2)
    fileMultiUploadField.addQueueUploadCompleteListener(queueUploadCompleteEvent -> { (3)
        for (Map.Entry<UUID, String> entry : fileMultiUploadField.getUploadsMap().entrySet()) { (4)
            UUID fileId = entry.getKey();
            String fileName = entry.getValue();
            FileRef fileRef = temporaryStorage.putFileIntoStorage(fileId, fileName); (5)
        }
        notifications.create()
                .withCaption("Uploaded files: " + fileMultiUploadField.getUploadsMap().values())
                .show();
        fileMultiUploadField.clearUploads(); (6)
    });
    fileMultiUploadField.addFileUploadErrorListener(queueFileUploadErrorEvent ->
            notifications.create()
                    .withCaption("File upload error")
                    .show());
}
1 界面控制器中，注入组件本身以及 TemporaryStorage 接口。
2 在界面初始化过程中，添加事件监听器，这样可以在文件上传成功或者出错时做出反馈。
3 该组件将所有选择的文件上传到临时存储并且调用通过 addQueueUploadCompleteListener() 方法添加的监听器。
4 在这个监听器里面，会调用 FileMultiUploadField.getUploadsMap() 方法获得临时存储的文件标识和文件名映射关系的 map。
5 然后你可以将上传的文件转移至永久文件存储并获取对应的 FileRef 对象。
6 完成整个上传过程之后，文件列表需要通过调用 clearUploads() 方法清空以便下一次上传再使用。

监听器

FileMultiUploadField 组件有下列监听器，均在 FileStorageUploadField 组件内介绍：

属性

FileMultiUploadField 组件有如下属性，均在 FileStorageUploadField 组件内介绍：

方法

  • getUploadsMap() - 返回 TemporaryStorage 中的文件 id 和文件名的映射。

  • clearUploads() - 清空上传文件列表。

FileMultiUploadField XML 属性

accept - box.expandRatio - caption - captionAsHtml - colspan - contextHelpText - contextHelpTextHtmlEnabled - description - descriptionAsHtml - dropZone - dropZonePrompt - enable - css - fileSizeLimit - height - htmlSanitizerEnabled - icon - id - pasteZone - permittedExtensions - responsive - rowspan - stylename - tabindex - visible - width