Skip to content

Commit 0099bd3

Browse files
authored
feat(DropUpload): add DropUpload component (#5236)
* refactor: 更新注释 * feat: 增加 DropUpload 组件 * doc: 增加示例 * style: 更新样式 * feat: 增加 IconTemplate * feat: 增加 BodyTemplate 参数 * feat: 增加点击上传功能 * feat: 增加 Template 参数 * style: 微调样式 * refactor: 调整脚本 * refactor: 精简代码 * doc: 精简提示信息 * doc: 更新 GlobalException 描述信息 * doc: 增加缓存键值列样式 * refactor: 重构代码 * doc: 增加异常捕获 * feat: 增加参数逻辑 * doc: 更新示例文档 * feat: 增加上传列表功能 * doc: 更新示例 * doc: 更新资源文件 * test: 更新单元测试
1 parent b6f47f0 commit 0099bd3

File tree

19 files changed

+351
-21
lines changed

19 files changed

+351
-21
lines changed

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,18 @@ private async Task OnStart()
2222
{
2323
if (!string.IsNullOrEmpty(InputText))
2424
{
25-
await SynthesizerService.SynthesizerOnceAsync(InputText, Synthesizer);
25+
try
26+
{
27+
await SynthesizerService.SynthesizerOnceAsync(InputText, Synthesizer);
28+
}
29+
catch (Exception)
30+
{
31+
}
32+
}
33+
else
34+
{
35+
await SynthesizerService.CloseAsync(Synthesizer);
2636
}
27-
}
28-
else
29-
{
30-
await SynthesizerService.CloseAsync(Synthesizer);
3137
}
3238
}
3339

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,10 @@
185185
<CardUpload TValue="string" DefaultFileList="@Base64FormatFileList" IsSingle="true" />
186186
</DemoBlock>
187187

188+
<DemoBlock Title="@Localizer["DropUploadTitle"]" Introduction="@Localizer["DropUploadIntro"]" Name="DropUpload">
189+
<DropUpload OnChange="@OnCardUpload" ShowProgress="true" ShowFooter="true" FooterText="@Localizer["DropUploadFooterText"]"></DropUpload>
190+
</DemoBlock>
191+
188192
<AttributeTable Items="@GetInputAttributes()" Title="InputUpload" />
189193

190194
<AttributeTable Items="@GetButtonAttributes()" Title="ButtonUpload/CardUpload" />

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3441,7 +3441,10 @@
34413441
"UploadsSaveFile": "Save the file",
34423442
"UploadsSaveFileMsg": "The current mode is WebAssembly, call Webapi mode to save files to the server side or database",
34433443
"UploadsRemoveMsg": "The removal was successful",
3444-
"UploadsIconTemplate": "The template of file icon"
3444+
"UploadsIconTemplate": "The template of file icon",
3445+
"DropUploadTitle": "Drop to upload",
3446+
"DropUploadIntro": "Drag and drop files into the specified area to upload",
3447+
"DropUploadFooterText": "file size less than 5Mb"
34453448
},
34463449
"BootstrapBlazor.Server.Components.Samples.ValidateForms": {
34473450
"ChangeButtonText": "Change",

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3441,7 +3441,10 @@
34413441
"UploadsSaveFile": "保存文件",
34423442
"UploadsSaveFileMsg": "当前模式为 WebAssembly 模式,请调用 Webapi 模式保存文件到服务器端或数据库中",
34433443
"UploadsRemoveMsg": "成功移除",
3444-
"UploadsIconTemplate": "文件图标模板"
3444+
"UploadsIconTemplate": "文件图标模板",
3445+
"DropUploadTitle": "拖拽上传",
3446+
"DropUploadIntro": "将文件拖拽到特定区域以进行上传",
3447+
"DropUploadFooterText": "文件大小不超过 5Mb"
34453448
},
34463449
"BootstrapBlazor.Server.Components.Samples.ValidateForms": {
34473450
"ChangeButtonText": "更改组件",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
namespace BootstrapBlazor.Components;
99

1010
/// <summary>
11-
///
11+
/// 头像上传组件
1212
/// </summary>
1313
public partial class AvatarUpload<TValue>
1414
{

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
namespace BootstrapBlazor.Components;
99

1010
/// <summary>
11-
///
11+
/// 按钮上传组件
1212
/// </summary>
1313
public partial class ButtonUpload<TValue>
1414
{

src/BootstrapBlazor/Components/Upload/ButtonUploadBase.cs

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -220,14 +220,6 @@ protected override async Task OnFileChange(InputFileChangeEventArgs args)
220220
await base.OnFileChange(args);
221221
}
222222

223-
private void Update(UploadFile file)
224-
{
225-
if (GetShowProgress(file))
226-
{
227-
StateHasChanged();
228-
}
229-
}
230-
231223
/// <summary>
232224
/// <inheritdoc/>
233225
/// </summary>
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@namespace BootstrapBlazor.Components
2+
@inherits SingleUploadBase<string>
3+
4+
@if (IsShowLabel)
5+
{
6+
<BootstrapLabel required="@Required" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText"/>
7+
}
8+
<div @attributes="@AdditionalAttributes" class="@DropUploadClassString" id="@Id">
9+
<div class="upload-drop-body">
10+
@if (BodyTemplate != null)
11+
{
12+
@BodyTemplate
13+
}
14+
else
15+
{
16+
<div class="upload-drop-icon">
17+
@if (IconTemplate != null)
18+
{
19+
@IconTemplate
20+
}
21+
else
22+
{
23+
<i class="@UploadIcon"></i>
24+
}
25+
</div>
26+
<div class="upload-drop-text">
27+
@if (TextTemplate != null)
28+
{
29+
@TextTemplate
30+
}
31+
else
32+
{
33+
@(new MarkupString(UploadText))
34+
}
35+
</div>
36+
}
37+
</div>
38+
@if (ShowFooter)
39+
{
40+
<div class="upload-drop-footer">
41+
@if (FooterTemplate != null)
42+
{
43+
@FooterTemplate
44+
}
45+
else
46+
{
47+
@(new MarkupString(FooterText))
48+
}
49+
</div>
50+
}
51+
<ul class="upload-drop-list">
52+
@foreach (var item in GetUploadFiles())
53+
{
54+
@if (GetShowProgress(item))
55+
{
56+
<li @key="item" class="upload-drop-item">
57+
<div class="upload-drop-item-file">
58+
<span>@item.GetFileName()</span>
59+
<span>(@item.Size.ToFileSizeString())</span>
60+
</div>
61+
<Progress Color="Color.Success" Height="4" Value="@item.ProgressPercent" class="upload-drop-process" />
62+
</li>
63+
}
64+
}
65+
</ul>
66+
<InputFile AdditionalAttributes="@GetUploadAdditionalAttributes()" OnChange="OnFileChange"/>
67+
</div>
Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
5+
6+
using Microsoft.AspNetCore.Components.Forms;
7+
using Microsoft.Extensions.Localization;
8+
9+
namespace BootstrapBlazor.Components;
10+
11+
/// <summary>
12+
/// DropUpload 组件
13+
/// </summary>
14+
public partial class DropUpload
15+
{
16+
/// <summary>
17+
/// 获得/设置 Body 模板 默认 null
18+
/// <para>设置 BodyTemplate 后 <see cref="IconTemplate"/> <see cref="TextTemplate"/> 不生效</para>
19+
/// </summary>
20+
[Parameter]
21+
public RenderFragment? BodyTemplate { get; set; }
22+
23+
/// <summary>
24+
///获得/设置 图标模板 默认 null
25+
/// </summary>
26+
[Parameter]
27+
public RenderFragment? IconTemplate { get; set; }
28+
29+
/// <summary>
30+
/// 获得/设置 图标 默认 null
31+
/// </summary>
32+
[Parameter]
33+
public string? UploadIcon { get; set; }
34+
35+
/// <summary>
36+
/// 获得/设置 文字模板 默认 null
37+
/// </summary>
38+
[Parameter]
39+
public RenderFragment? TextTemplate { get; set; }
40+
41+
/// <summary>
42+
/// 获得/设置 上传文字 默认 null
43+
/// </summary>
44+
[Parameter]
45+
[NotNull]
46+
public string? UploadText { get; set; }
47+
48+
/// <summary>
49+
/// 获得/设置 是否显示 Footer 默认 false 不显示
50+
/// </summary>
51+
[Parameter]
52+
public bool ShowFooter { get; set; }
53+
54+
/// <summary>
55+
/// 获得/设置 Footer 字符串模板 默认 null 未设置
56+
/// </summary>
57+
[Parameter]
58+
public RenderFragment? FooterTemplate { get; set; }
59+
60+
/// <summary>
61+
/// 获得/设置 Footer 字符串信息 默认 null 未设置
62+
/// </summary>
63+
[Parameter]
64+
[NotNull]
65+
public string? FooterText { get; set; }
66+
67+
[Inject]
68+
[NotNull]
69+
private IIconTheme? IconTheme { get; set; }
70+
71+
[Inject]
72+
[NotNull]
73+
private IStringLocalizer<UploadBase<string>>? Localizer { get; set; }
74+
75+
private string? DropUploadClassString => CssBuilder.Default(ClassString)
76+
.AddClass("is-drop")
77+
.AddClassFromAttributes(AdditionalAttributes)
78+
.Build();
79+
80+
/// <summary>
81+
/// <inheritdoc/>
82+
/// </summary>
83+
protected override void OnParametersSet()
84+
{
85+
base.OnParametersSet();
86+
87+
UploadIcon ??= IconTheme.GetIconByKey(ComponentIcons.DropUploadIcon);
88+
UploadText ??= Localizer["DropUploadText"];
89+
FooterText ??= Localizer["DropFooterText"];
90+
}
91+
92+
/// <summary>
93+
/// <inheritdoc/>
94+
/// </summary>
95+
/// <param name="args"></param>
96+
/// <returns></returns>
97+
protected override async Task OnFileChange(InputFileChangeEventArgs args)
98+
{
99+
var file = new UploadFile()
100+
{
101+
OriginFileName = args.File.Name,
102+
Size = args.File.Size,
103+
File = args.File,
104+
Uploaded = false,
105+
UpdateCallback = Update
106+
};
107+
UploadFiles.Add(file);
108+
if (OnChange != null)
109+
{
110+
await OnChange(file);
111+
}
112+
file.Uploaded = true;
113+
}
114+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
namespace BootstrapBlazor.Components;
1010

1111
/// <summary>
12-
///
12+
/// InputUpload 组件
1313
/// </summary>
1414
public partial class InputUpload<TValue>
1515
{

0 commit comments

Comments
 (0)