feat(Upload): use local preview instead of base64 format (#6157)

* feat: 增加 readFileToBlobAsync 方法

* chore: 方法重命名

* feat: 增加 getPreviewUrl 方法

* refactor: 改用客户端预览方法

* doc: 更新头像上传示例

* refactor: 增加 CanPreviewCallback 回调方法

* refactor: 增加图片预览功能

* refactor: 增加返回值注释

* test: 更新单元测试

* chore: bump version 9.7.1-beta05

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/UploadAvatars.razor

@@ -55,13 +55,13 @@
 <DemoBlock Title="@Localizer["AvatarUploadAcceptTitle"]"
            Introduction="@Localizer["AvatarUploadAcceptIntro"]"
            Name="Accept">
-    <AvatarUpload TValue="string" Accept="image/*" OnChange="@OnChange"></AvatarUpload>
+    <AvatarUpload TValue="string" Accept="image/*"></AvatarUpload>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["AvatarUploadValidateTitle"]"
            Introduction="@Localizer["AvatarUploadValidateIntro"]"
            Name="ValidateForm">
-    <ValidateForm Model="@_foo" OnValidSubmit="OnAvatarValidSubmit">
+    <ValidateForm Model="@_foo" OnValidSubmit="OnAvatarValidSubmit" OnInValidSubmit="OnAvatarInValidSubmit">
         <div class="row g-3">
             <div class="col-12">
                 <BootstrapInput @bind-Value="@_foo.Name"></BootstrapInput>

src/BootstrapBlazor.Server/Components/Samples/UploadAvatars.razor.cs

@@ -37,39 +37,14 @@ protected override void OnInitialized()
         ]);
     }
 
-    private async Task OnChange(UploadFile file)
+    private Task OnAvatarValidSubmit(EditContext context)
     {
-        // 示例代码，使用 base64 格式
-        if (file is { File: not null })
-        {
-            var format = file.File.ContentType;
-            if (file.IsImage())
-            {
-                _token ??= new CancellationTokenSource();
-                if (_token.IsCancellationRequested)
-                {
-                    _token.Dispose();
-                    _token = new CancellationTokenSource();
-                }
-
-                await file.RequestBase64ImageFileAsync(format, 640, 480, MaxFileLength, null, _token.Token);
-            }
-            else
-            {
-                file.Code = 1;
-                file.Error = Localizer["UploadsFormatError"];
-            }
-
-            if (file.Code != 0)
-            {
-                await ToastService.Error(Localizer["UploadsAvatarMsg"], $"{file.Error} {format}");
-            }
-        }
+        return ToastService.Success(Localizer["UploadsValidateFormTitle"], Localizer["UploadsValidateFormValidContent"]);
     }
 
-    private Task OnAvatarValidSubmit(EditContext context)
+    private Task OnAvatarInValidSubmit(EditContext context)
     {
-        return ToastService.Error(Localizer["UploadsValidateFormTitle"], Localizer["UploadsValidateFormValidContent"]);
+        return ToastService.Error(Localizer["UploadsValidateFormTitle"], Localizer["UploadsValidateFormInValidContent"]);
     }
 
     /// <summary>

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -3481,6 +3481,7 @@
     "UploadsBorderRadius": "Border radius",
     "UploadsValidateFormTitle": "ValidateForm",
     "UploadsValidateFormValidContent": "Saved successfully",
+    "UploadsValidateFormInValidContent": "Please correct it and submit the form again",
     "UploadsFormatError": "The file format is incorrect",
     "UploadsAvatarMsg": "Avatar upload"
   },

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -3481,6 +3481,7 @@
     "UploadsBorderRadius": "预览框圆角曲率",
     "UploadsValidateFormTitle": "表单应用",
     "UploadsValidateFormValidContent": "数据合规，保存成功",
+    "UploadsValidateFormInValidContent": "数据不合规，请更正后再提交表单",
     "UploadsFormatError": "文件格式不正确",
     "UploadsAvatarMsg": "头像上传"
   },

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.7.1-beta04</Version>
+    <Version>9.7.1-beta05</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs

@@ -77,6 +77,12 @@ public partial class AvatarUpload<TValue>
     [Parameter]
     public bool IsUploadButtonAtFirst { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否允许预览回调方法 默认 null
+    /// </summary>
+    [Parameter]
+    public Func<UploadFile, bool>? CanPreviewCallback { get; set; }
+
     [Inject]
     [NotNull]
     private IIconTheme? IconTheme { get; set; }
@@ -133,14 +139,12 @@ protected override void OnParametersSet()
     /// <returns></returns>
     protected override async Task TriggerOnChanged(UploadFile file)
     {
-        if (OnChange == null)
-        {
-            await file.RequestBase64ImageFileAsync(allowExtensions: AllowExtensions);
-        }
-        else
+        // 从客户端获得预览地址不使用 base64 编码
+        if (file.IsImage(AllowExtensions, CanPreviewCallback))
         {
-            await OnChange(file);
+            file.PrevUrl = await InvokeAsync<string?>("getPreviewUrl", Id, file.OriginFileName);
         }
+        await base.TriggerOnChanged(file);
     }
 
     private IReadOnlyCollection<ValidationResult> _results = [];

src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs

@@ -133,6 +133,21 @@ protected override void OnParametersSet()
         RemoveIcon ??= IconTheme.GetIconByKey(ComponentIcons.CardUploadRemoveIcon);
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="file"></param>
+    /// <returns></returns>
+    protected override async Task TriggerOnChanged(UploadFile file)
+    {
+        // 从客户端获得预览地址不使用 base64 编码
+        if (file.IsImage(AllowExtensions, CanPreviewCallback))
+        {
+            file.PrevUrl = await InvokeAsync<string?>("getPreviewUrl", Id, file.OriginFileName);
+        }
+        await base.TriggerOnChanged(file);
+    }
+
     private async Task OnCardFileDelete(UploadFile item)
     {
         await OnFileDelete(item);

src/BootstrapBlazor/Extensions/UploadFileExtensions.cs

@@ -194,14 +194,14 @@ public static async Task<bool> SaveToFileAsync(this UploadFile upload, string fi
     /// </summary>
     /// <param name="item"></param>
     /// <param name="allowExtensions"></param>
-    /// <param name="_callback"></param>
+    /// <param name="callback"></param>
     /// <returns></returns>
-    public static bool IsImage(this UploadFile item, List<string>? allowExtensions = null, Func<UploadFile, bool>? _callback = null)
+    public static bool IsImage(this UploadFile item, List<string>? allowExtensions = null, Func<UploadFile, bool>? callback = null)
     {
         bool ret;
-        if (_callback != null)
+        if (callback != null)
         {
-            ret = _callback(item);
+            ret = callback(item);
         }
         else if (item.File != null)
         {

src/BootstrapBlazor/wwwroot/modules/upload.js

@@ -1,20 +1,24 @@
 import Data from "./data.js"
 import EventHandler from "./event-handler.js"
+import { readFileAsync } from "./utility.js"
 
 export function init(id) {
     const el = document.getElementById(id)
     if (el === null) {
         return
     }
-    const preventHandler = e => e.preventDefault()
+    const preventHandler = e => e.preventDefault();
     const body = el.querySelector('.upload-drop-body');
-    const upload = { el, body, preventHandler }
+    const inputFile = el.querySelector('[type="file"]');
+    const upload = { el, body, preventHandler, inputFile };
     Data.set(id, upload)
 
-    const inputFile = el.querySelector('[type="file"]')
     EventHandler.on(el, 'click', '.btn-browser', () => {
         inputFile.click()
     })
+    EventHandler.on(inputFile, 'change', e => {
+        upload.files = e.delegateTarget.files;
+    });
 
     EventHandler.on(document, "dragleave", preventHandler)
     EventHandler.on(document, 'drop', preventHandler)
@@ -79,12 +83,28 @@ export function init(id) {
     })
 }
 
+export async function getPreviewUrl(id, fileName) {
+    let url = '';
+    const upload = Data.get(id);
+    const { files } = upload;
+    if (files) {
+        const file = [...files].find(v => v.name === fileName);
+        if (file) {
+            const data = await readFileAsync(file);
+            if (data) {
+                url = URL.createObjectURL(data);
+            }
+        }
+    }
+    return url;
+}
+
 export function dispose(id) {
     const upload = Data.get(id)
     Data.remove(id)
 
     if (upload) {
-        const { el, body, preventHandler } = upload;
+        const { el, body, preventHandler, inputFile } = upload;
 
         EventHandler.off(document, 'dragleave', preventHandler)
         EventHandler.off(document, 'drop', preventHandler)
@@ -94,6 +114,7 @@ export function dispose(id) {
         EventHandler.off(el, 'click')
         EventHandler.off(el, 'drop')
         EventHandler.off(el, 'paste')
+        EventHandler.off(inputFile, 'change')
         EventHandler.off(body, 'dragleave')
         EventHandler.off(body, 'drop')
         EventHandler.off(body, 'dragenter')

src/BootstrapBlazor/wwwroot/modules/utility.js

@@ -886,6 +886,27 @@ export function drawImage(canvas, image, offsetWidth, offsetHeight) {
     context.drawImage(image, 0, 0, offsetWidth, offsetHeight);
 }
 
+/**
+ *  @param {File} file
+ *  @returns {Blob}
+ */
+export function readFileAsync(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        reader.onload = () => {
+            const blob = new Blob([reader.result], { type: file.type });
+            resolve(blob);
+        };
+
+        reader.onerror = (error) => {
+            reject(error);
+        };
+
+        reader.readAsArrayBuffer(file);
+    });
+}
+
 export {
     autoAdd,
     autoRemove,