Episerver Forms UI问题：启用允许多文件上传后上传内容未在UI显示

问题普遍性确认 #

是的，不少使用Episerver Forms的用户（尤其是版本低于1.30.x的部署环境）都反馈过这个问题——原生多文件上传组件的UI交互存在明显缺陷，无法满足用户对已上传文件的管理需求。

推荐解决方法 #

1. 前端UI定制（快速见效） #

通过监听Episerver Forms内置的文件上传事件，自定义渲染已上传文件列表：

• 监听核心事件：利用epi-forms-fileupload命名空间下的fileAdded、fileRemoved事件，捕获文件上传/移除动作
• 动态生成文件列表：在页面中添加一个隐藏容器，当有文件上传时，动态插入包含文件名、大小的列表项，并绑定删除按钮的点击事件（调用组件原生移除方法）
• 示例代码片段：

$(document).on('fileAdded', '.epi-forms-fileupload', function(e, file) {
    const fileList = $(this).siblings('.uploaded-files-list');
    fileList.append(`<div class="file-item">
        <span>${file.name} (${formatFileSize(file.size)})</span>
        <button class="remove-file" data-file-id="${file.id}">删除</button>
    </div>`);
});

$(document).on('click', '.remove-file', function() {
    const fileUpload = $(this).closest('.epi-forms-fileupload-container').find('.epi-forms-fileupload');
    fileUpload.data('epiFormsFileUpload').removeFile($(this).data('file-id'));
    $(this).parent().remove();
});

function formatFileSize(size) {
    if (size < 1024) return size + ' B';
    else if (size < 1048576) return (size / 1024).toFixed(2) + ' KB';
    else return (size / 1048576).toFixed(2) + ' MB';
}

• 样式优化：添加CSS使文件列表清晰可见，区分上传前后的控件状态，比如修改上传按钮样式或添加状态提示文本

2. 扩展Episerver Forms后端视图 #

通过自定义FileUpload元素的视图模板，从底层完善UI展示：

• 继承原生FileUploadElementBlock：创建自定义块类型，继承自Episerver Forms的原生文件上传块
• 重写视图模板：复制原生的FileUploadElementBlock.cshtml模板，添加已上传文件列表的渲染区域，利用后端传递的已上传文件数据生成列表
• 绑定后端逻辑：确保删除操作能正确触发Episerver Forms的文件移除逻辑，更新表单数据

3. 集成第三方上传组件（进阶方案） #

如果原生组件的扩展无法满足需求，可以替换为成熟的第三方上传组件：

• 选择兼容组件：比如Dropzone.js、Fine Uploader等，这些组件自带完善的多文件管理UI（列表展示、删除、预览）
• 适配表单流程：确保组件能将上传的文件信息正确传递给Episerver Forms的表单提交接口，保持和原有表单数据的关联
• 注意权限：确保文件存储路径和权限符合Episerver的配置要求

用户体验优化建议 #

• 添加上传进度提示：针对大文件上传，实时显示进度条
• 前置验证：在上传前验证文件类型、大小，给出即时提示
• 图片预览：对图片类文件提供缩略图预览功能
• 状态区分：上传完成后修改控件样式，明确提示当前已上传文件数量

内容的提问来源于stack exchange，提问作者Farhin Shaikh