feat(Upload): redesign upload components

.github/workflows/build.yml

@@ -42,4 +42,4 @@ jobs:
 
     - name: Check Localizer
       run: |
-        dotnet test test/UnitTestLocalization
+        dotnet test test/UnitTest.Localization

exclusion.dic

@@ -114,3 +114,5 @@ inputmode
 Totp
 otpauth
 Hotp
+univer
+rdkit

src/BootstrapBlazor.Server/Components/Components/BlazorReconnector.razor

@@ -67,7 +67,7 @@
         <div class="d-flex">
             <div class="flex-fill">
                 <p>一套基于 <b>Bootstrap</b> 样式的企业级 <b>Blazor UI</b> 组件库，支持 Server 与 WebAssembly</p>
-                <p>适配移动端支持各种主流浏览器以及移动端，适配 <b>ABP</b>，同时支持 <b>NET6/NET7/NET8</b></p>
+                <p>适配移动端支持各种主流浏览器以及移动端，适配 <b>ABP</b>，同时支持 <b>NET6/NET7/NET8/NET9</b></p>
                 <p></p>
                 <div>已提供项目模板方便快速上手 <a class="connection-link" href="@TemplateUrl" target="_blank">项目模板</a></div>
             </div>

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

@@ -224,7 +224,7 @@
 
 <DemoBlock Title="@Localizer["ClearableTitle"]"
            Introduction="@Localizer["ClearableIntro"]"
-           Name="OnInput">
+           Name="IsClearable">
     <div class="row g-3">
         <div class="col-12 col-sm-6">
             <BootstrapInput Value="Model.Name" IsClearable="true" ShowLabel="true" DisplayText="Clearable" />

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

@@ -97,7 +97,7 @@
                 <div class="d-flex">
                     <div class="flex-fill">
                         <p>基于 <b>Bootstrap</b> 样式的 <b>Blazor UI</b> 组件库</p>
-                        <p>适配移动端支持各种主流浏览器，适配 <b>ABP</b>，同时支持 <b>NET6/NET7/NET8</b>，交流群 <b>795206915</b></p>
+                        <p>适配移动端支持各种主流浏览器，适配 <b>ABP</b>，同时支持 <b>NET6/NET7/NET8/NET9</b>，交流群 <b>795206915</b></p>
                         <p>已提供项目模板方便快速上手 <a class="connection-link" href="@TemplateUrl">项目模板</a></p>
                     </div>
                     <div class="connection-body-tail d-none d-sm-block"></div>
@@ -126,7 +126,7 @@
                 &lt;div class="d-flex"&gt;
                     &lt;div class="flex-fill"&gt;
                         &lt;div class="mb-2"&gt;基于 &lt;b&gt;Bootstrap&lt;/b&gt; 样式的 &lt;b&gt;Blazor UI&lt;/b&gt; 组件库&lt;/div&gt;
-                        &lt;div class="mb-2"&gt;适配移动端支持各种主流浏览器，适配 &lt;b&gt;ABP&lt;/b&gt;，同时支持 &lt;b&gt;NET6/NET7/NET8&lt;/b&gt;，交流群 &lt;b&gt;795206915&lt;/b&gt;&lt;/div&gt;
+                        &lt;div class="mb-2"&gt;适配移动端支持各种主流浏览器，适配 &lt;b&gt;ABP&lt;/b&gt;，同时支持 &lt;b&gt;NET6/NET7/NET8/NET9&lt;/b&gt;，交流群 &lt;b&gt;795206915&lt;/b&gt;&lt;/div&gt;
                         &lt;div&gt;已提供项目模板方便快速上手 &lt;a class="connection-link" href="@TemplateUrl"&gt;项目模板&lt;/a&gt;&lt;/div&gt;
                     &lt;/div&gt;
                     &lt;div class="connection-body-tail d-none d-sm-block"&gt;&lt;/div&gt;
@@ -187,7 +187,7 @@
                 &lt;div class="d-flex"&gt;
                     &lt;div class="flex-fill"&gt;
                         &lt;div class="mb-2"&gt;基于 &lt;b&gt;Bootstrap&lt;/b&gt; 样式的 &lt;b&gt;Blazor UI&lt;/b&gt; 组件库&lt;/div&gt;
-                        &lt;div class="mb-2"&gt;适配移动端支持各种主流浏览器，适配 &lt;b&gt;ABP&lt;/b&gt;，同时支持 &lt;b&gt;NET6/NET7/NET8&lt;/b&gt;，交流群 &lt;b&gt;795206915&lt;/b&gt;&lt;/div&gt;
+                        &lt;div class="mb-2"&gt;适配移动端支持各种主流浏览器，适配 &lt;b&gt;ABP&lt;/b&gt;，同时支持 &lt;b&gt;NET6/NET7/NET8/NET9&lt;/b&gt;，交流群 &lt;b&gt;795206915&lt;/b&gt;&lt;/div&gt;
                         &lt;div&gt;已提供项目模板方便快速上手 &lt;a class="connection-link" href="@TemplateUrl"&gt;项目模板&lt;/a&gt;&lt;/div&gt;
                     &lt;/div&gt;
                     &lt;div class="connection-body-tail d-none d-sm-block"&gt;&lt;/div&gt;
@@ -248,7 +248,7 @@
                 &lt;div class="d-flex"&gt;
                     &lt;div class="flex-fill"&gt;
                         &lt;div class="mb-2"&gt;基于 &lt;b&gt;Bootstrap&lt;/b&gt; 样式的 &lt;b&gt;Blazor UI&lt;/b&gt; 组件库&lt;/div&gt;
-                        &lt;div class="mb-2"&gt;适配移动端支持各种主流浏览器，适配 &lt;b&gt;ABP&lt;/b&gt;，同时支持 &lt;b&gt;NET6/NET7/NET8&lt;/b&gt;，交流群 &lt;b&gt;795206915&lt;/b&gt;&lt;/div&gt;
+                        &lt;div class="mb-2"&gt;适配移动端支持各种主流浏览器，适配 &lt;b&gt;ABP&lt;/b&gt;，同时支持 &lt;b&gt;NET6/NET7/NET8/NET9&lt;/b&gt;，交流群 &lt;b&gt;795206915&lt;/b&gt;&lt;/div&gt;
                         &lt;div&gt;已提供项目模板方便快速上手 &lt;a class="connection-link" href="@TemplateUrl"&gt;项目模板&lt;/a&gt;&lt;/div&gt;
                     &lt;/div&gt;
                     &lt;div class="connection-body-tail d-none d-sm-block"&gt;&lt;/div&gt;

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

@@ -0,0 +1,72 @@
+@page "/upload-avatar"
+@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
+@inject IStringLocalizer<UploadAvatars> Localizer
+@inject ToastService ToastService
+
+<h3>@Localizer["UploadsTitle"]</h3>
+
+<h4>@Localizer["UploadsSubTitle"]</h4>
+
+<p>@((MarkupString)Localizer["UploadsNote"].Value)</p>
+
+<Pre class="no-highlight">builder.Services.Configure&lt;HubOptions&gt;(option => option.MaximumReceiveMessageSize = null);</Pre>
+
+<DemoBlock Title="@Localizer["AvatarUploadTitle"]"
+           Introduction="@Localizer["AvatarUploadIntro"]"
+           Name="Normal">
+    <section ignore>
+        <div class="row g-3">
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IsMultiple"></BootstrapInputGroupLabel>
+                    <Switch @bind-Value="@_isMultiple"></Switch>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IsUploadButtonAtFirst"></BootstrapInputGroupLabel>
+                    <Switch @bind-Value="@_isUploadButtonAtFirst"></Switch>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IsCircle"></BootstrapInputGroupLabel>
+                    <Switch @bind-Value="@_isCircle"></Switch>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="BorderRadius"></BootstrapInputGroupLabel>
+                    <Slider @bind-Value="@_radius" Min="0" Max="49" UseInputEvent="true"></Slider>
+                </BootstrapInputGroup>
+            </div>
+        </div>
+    </section>
+    <AvatarUpload TValue="string" IsMultiple="@_isMultiple" IsCircle="@_isCircle" BorderRadius="@RadiusString"></AvatarUpload>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["AvatarUploadAcceptTitle"]"
+           Introduction="@Localizer["AvatarUploadAcceptIntro"]"
+           Name="Accept">
+    <AvatarUpload TValue="string" Accept="image/*" OnChange="@OnChange"></AvatarUpload>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["AvatarUploadValidateTitle"]"
+           Introduction="@Localizer["AvatarUploadValidateIntro"]"
+           Name="ValidateForm">
+    <ValidateForm Model="@_foo" OnValidSubmit="OnAvatarValidSubmit">
+        <div class="row g-3">
+            <div class="col-12">
+                <BootstrapInput @bind-Value="@_foo.Name"></BootstrapInput>
+            </div>
+            <div class="col-12">
+                <AvatarUpload @bind-Value="@_foo.Picture"></AvatarUpload>
+            </div>
+            <div class="col-12">
+                <Button ButtonType="@ButtonType.Submit" Text="@Localizer["AvatarUploadButtonText"]"></Button>
+            </div>
+        </div>
+    </ValidateForm>
+</DemoBlock>
+
+<AttributeTable Items="@GetAttributes()"></AttributeTable>

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

@@ -0,0 +1,185 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+using Microsoft.AspNetCore.Components.Forms;
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// AvatarUpload sample code
+/// </summary>
+public partial class UploadAvatars : IDisposable
+{
+    private static readonly long MaxFileLength = 5 * 1024 * 1024;
+    private CancellationTokenSource? _token;
+    private readonly List<UploadFile> _previewFileList = [];
+    private readonly Person _foo = new();
+    private bool _isMultiple = true;
+    private bool _isUploadButtonAtFirst;
+    private bool _isCircle;
+    private int _radius = 49;
+
+    private string? RadiusString => $"{_radius}px";
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _previewFileList.AddRange(
+        [
+            new UploadFile { PrevUrl = $"{WebsiteOption.CurrentValue.AssetRootPath}images/Argo.png" }
+        ]);
+    }
+
+    private async Task OnChange(UploadFile file)
+    {
+        // 示例代码，使用 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, _token.Token);
+            }
+            else
+            {
+                file.Code = 1;
+                file.Error = Localizer["UploadsFormatError"];
+            }
+
+            if (file.Code != 0)
+            {
+                await ToastService.Error(Localizer["UploadsAvatarMsg"], $"{file.Error} {format}");
+            }
+        }
+    }
+
+    private Task OnAvatarValidSubmit(EditContext context)
+    {
+        return Task.CompletedTask;
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    public void Dispose()
+    {
+        _token?.Cancel();
+        GC.SuppressFinalize(this);
+    }
+
+    private List<AttributeItem> GetAttributes() =>
+    [
+        new()
+        {
+            Name = "Width",
+            Description = Localizer["UploadsWidth"],
+            Type = "int",
+            ValueList = " — ",
+            DefaultValue = "0"
+        },
+        new()
+        {
+            Name = "Height",
+            Description = Localizer["UploadsHeight"],
+            Type = "int",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "IsCircle",
+            Description = Localizer["UploadsIsCircle"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name = "BorderRadius",
+            Description = Localizer["UploadsBorderRadius"],
+            Type = "string?",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "IsDirectory",
+            Description = Localizer["UploadsIsDirectory"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name = "IsMultiple",
+            Description = Localizer["UploadsIsMultiple"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name = "ShowProgress",
+            Description = Localizer["UploadsShowProgress"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name = "Accept",
+            Description = Localizer["UploadsAccept"],
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "DefaultFileList",
+            Description = Localizer["UploadsDefaultFileList"],
+            Type = "List<UploadFile>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "OnDelete",
+            Description = Localizer["UploadsOnDelete"],
+            Type = "Func<string, Task<bool>>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "OnChange",
+            Description = Localizer["UploadsOnChange"],
+            Type = "Func<UploadFile, Task>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        }
+    ];
+
+    class Person
+    {
+        [Required]
+        [StringLength(20, MinimumLength = 2)]
+        public string Name { get; set; } = "Blazor";
+
+        [Required]
+        [FileValidation(Extensions = [".png", ".jpg", ".jpeg"], FileSize = 5 * 1024 * 1024)]
+        public IBrowserFile? Picture { get; set; }
+    }
+}

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

@@ -0,0 +1,63 @@
+@page "/upload-button"
+@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
+@inject IStringLocalizer<UploadButtons> Localizer
+@inject ToastService ToastService
+
+<h3>@Localizer["UploadsTitle"]</h3>
+
+<h4>@Localizer["UploadsSubTitle"]</h4>
+
+<p>@((MarkupString)Localizer["UploadsNote"].Value)</p>
+
+<Pre class="no-highlight">builder.Services.Configure&lt;HubOptions&gt;(option => option.MaximumReceiveMessageSize = null);</Pre>
+
+<DemoBlock Title="@Localizer["ButtonUploadTitle"]"
+           Introduction="@Localizer["ButtonUploadIntro"]"
+           Name="Normal">
+    <section ignore>
+        <div class="row g-3">
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IsDisabled"></BootstrapInputGroupLabel>
+                    <Switch @bind-Value="@_isDisabled"></Switch>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IsMultiple"></BootstrapInputGroupLabel>
+                    <Switch @bind-Value="@_isMultiple"></Switch>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IsDirectory"></BootstrapInputGroupLabel>
+                    <Switch @bind-Value="@_isDirectory"></Switch>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="ShowProgress"></BootstrapInputGroupLabel>
+                    <Switch @bind-Value="@_showProgress"></Switch>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="ShowUploadFileList"></BootstrapInputGroupLabel>
+                    <Switch @bind-Value="@_showUploadFileList"></Switch>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="ShowDownloadButton"></BootstrapInputGroupLabel>
+                    <Switch @bind-Value="@_showDownloadButton"></Switch>
+                </BootstrapInputGroup>
+            </div>
+        </div>
+    </section>
+    <ButtonUpload TValue="string" IsMultiple="@_isMultiple" IsDirectory="@_isDirectory" IsDisabled="@_isDisabled"
+                  ShowProgress="@_showProgress"
+                  ShowUploadFileList="@_showUploadFileList" ShowDownloadButton="@_showDownloadButton"
+                  OnChange="@OnClickToUpload"></ButtonUpload>
+</DemoBlock>
+
+<AttributeTable Items="@GetAttributes()"></AttributeTable>