feat(DropUpload): add DropUpload component

src/BootstrapBlazor.Server/Components/Samples/Speeches/Synthesizers.razor.cs

@@ -22,12 +22,18 @@ private async Task OnStart()
         {
             if (!string.IsNullOrEmpty(InputText))
             {
-                await SynthesizerService.SynthesizerOnceAsync(InputText, Synthesizer);
+                try
+                {
+                    await SynthesizerService.SynthesizerOnceAsync(InputText, Synthesizer);
+                }
+                catch (Exception)
+                {
+                }
+            }
+            else
+            {
+                await SynthesizerService.CloseAsync(Synthesizer);
             }
-        }
-        else
-        {
-            await SynthesizerService.CloseAsync(Synthesizer);
         }
     }
 

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

@@ -12,6 +12,10 @@
 
 <Pre class="no-highlight">builder.Services.Configure&lt;HubOptions&gt;(option => option.MaximumReceiveMessageSize = null);</Pre>
 
+<DemoBlock Title="@Localizer["DropUploadTitle"]" Introduction="@Localizer["DropUploadIntro"]" Name="DropUpload">
+    <DropUpload TValue="string"></DropUpload>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["UploadNormalTitle"]"
            Introduction="@Localizer["UploadNormalIntro"]"
            Name="Normal">

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

@@ -8,7 +8,7 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// 
+/// 头像上传组件
 /// </summary>
 public partial class AvatarUpload<TValue>
 {

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

@@ -8,7 +8,7 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// 
+/// 按钮上传组件
 /// </summary>
 public partial class ButtonUpload<TValue>
 {

src/BootstrapBlazor/Components/Upload/DropUpload.razor

@@ -0,0 +1,39 @@
+@namespace BootstrapBlazor.Components
+@typeparam TValue
+@inherits SingleUploadBase<TValue>
+
+@if (IsShowLabel)
+{
+    <BootstrapLabel required="@Required" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText"/>
+}
+<div @attributes="@AdditionalAttributes" class="@DropUploadClassString" id="@Id">
+    <div class="upload-drop-body">
+        @if (BodyTemplate != null)
+        {
+            @BodyTemplate
+        }
+        else
+        {
+            <div class="upload-drop-icon">
+                <i class="fa-solid fa-cloud-arrow-up"></i>
+            </div>
+            <div class="upload-drop-text">
+                Drop file here or <em>click to upload</em>
+            </div>
+        }
+    </div>
+    @if (ShowFooter)
+    {
+        <div class="upload-drop-footer">
+            @if (FooterTemplate != null)
+            {
+                @FooterTemplate
+            }
+            else
+            {
+                @FooterString
+            }
+        </div>
+    }
+    <InputFile AdditionalAttributes="@GetUploadAdditionalAttributes()" OnChange="OnFileChange"/>
+</div>

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

@@ -0,0 +1,59 @@
+// 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
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// DropUpload 组件
+/// </summary>
+public partial class DropUpload<TValue>
+{
+    /// <summary>
+    /// 获得/设置 Body 模板 默认 null
+    /// </summary>
+    [Parameter]
+    public RenderFragment? BodyTemplate { get; set; }
+
+    /// <summary>
+    ///获得/设置 图标模板 默认 null
+    /// </summary>
+    public RenderFragment? IconTemplate { get; set; }
+
+    /// <summary>
+    /// 获得/设置 文字模板 默认 null
+    /// </summary>
+    public RenderFragment? TextTemplate { get; set; }
+
+    /// <summary>
+    /// 获得/设置 是否显示 Footer 默认 false 不显示
+    /// </summary>
+    public bool ShowFooter { get; set; }
+
+    /// <summary>
+    /// 获得/设置 Footer 字符串信息 默认 null 未设置
+    /// </summary>
+    public RenderFragment? FooterTemplate { get; set; }
+
+    /// <summary>
+    ///
+    /// </summary>
+    public string? FooterString { get; set; }
+
+    private string? DropUploadClassString => CssBuilder.Default(ClassString)
+        .AddClass("is-drop")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        FooterString ??= "just a test footer string";
+        ShowFooter = true;
+    }
+}

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

@@ -9,7 +9,7 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// 
+/// InputUpload 组件
 /// </summary>
 public partial class InputUpload<TValue>
 {

src/BootstrapBlazor/Components/Upload/SingleUploadBase.cs

@@ -6,7 +6,7 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// 
+/// SingleUploadBase 基类
 /// </summary>
 /// <typeparam name="TValue"></typeparam>
 public abstract class SingleUploadBase<TValue> : MultipleUploadBase<TValue>

src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss

@@ -10,6 +10,9 @@
     --bb-upload-card-padding: #{$bb-upload-card-padding};
     --bb-upload-card-margin: #{$bb-upload-card-margin};
     --bb-upload-card-item-width: #{$bb-upload-card-item-width};
+    --bb-upload-drop-height: #{$bb-upload-drop-height};
+    --bb-upload-drop-footer-font-size: #{$bb-upload-drop-footer-font-size};
+    --bb-upload-drop-footer-margin-top: #{$bb-upload-drop-footer-margin-top};
 }
 
 .upload .upload-body {
@@ -296,3 +299,35 @@
 .btn-group .upload .upload-body {
     display: none;
 }
+
+.upload.is-drop {
+    .upload-drop-body {
+        border: 2px dashed var(--bs-primary);
+        border-radius: var(--bs-border-radius);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: var(--bb-upload-drop-height);
+        cursor: pointer;
+
+        .upload-drop-icon > i {
+            font-size: 3em;
+            color: var(--bs-secondary);
+        }
+
+        .upload-drop-text {
+            margin-top: 1rem;
+        }
+
+        em {
+            color: var(--bs-primary);
+            font-style: normal;
+        }
+    }
+
+    .upload-drop-footer {
+        font-size: var(--bb-upload-drop-footer-font-size);
+        margin-top: var(--bb-upload-drop-footer-margin-top);
+    }
+}

src/BootstrapBlazor/wwwroot/modules/upload.js

@@ -15,6 +15,10 @@ export function init(id) {
         inputFile.click()
     })
 
+    EventHandler.on(el, 'click', '.upload-drop-body', () => {
+        inputFile.click()
+    })
+
     EventHandler.on(document, "dragleave", preventHandler)
     EventHandler.on(document, 'drop', preventHandler)
     EventHandler.on(document, 'dragenter', preventHandler)

src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss

@@ -690,6 +690,9 @@ $bb-upload-card-shadow: 0 0 10px 0 rgba(0,0,0,.2);
 $bb-upload-card-padding: 1rem;
 $bb-upload-card-margin: 0 1rem 1rem 0;
 $bb-upload-card-item-width: 168px;
+$bb-upload-drop-height: 140px;
+$bb-upload-drop-footer-font-size: 12px;
+$bb-upload-drop-footer-margin-top: .25rem;
 
 // ValidateForm
 $bb-form-control-padding: 0.375rem 0.75rem;