|
|
|
@ -0,0 +1,139 @@ |
|
|
|
|
|
|
|
@page "/forminputfile" |
|
|
|
|
|
|
|
@using System.Text |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@rendermode RenderMode.InteractiveServer |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<FluentLabel Typo="Typography.H3">InputFile</FluentLabel> |
|
|
|
|
|
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" /> |
|
|
|
|
|
|
|
<FluentLabel Typo="Typography.Body"> |
|
|
|
|
|
|
|
The <code>FluentInputFile</code> wrap the native Blazor <code>InputFile</code> component and extends it with drag/drop zone support. |
|
|
|
|
|
|
|
</FluentLabel> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel> |
|
|
|
|
|
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto"> |
|
|
|
|
|
|
|
<FluentInputFile Class="p-5 fluent-border-d1" Id="my-file-uploader" |
|
|
|
|
|
|
|
Mode="InputFileMode.SaveToTemporaryFolder" |
|
|
|
|
|
|
|
Multiple="true" |
|
|
|
|
|
|
|
MaximumFileCount="4" |
|
|
|
|
|
|
|
MaximumFileSize="@(10 * 1024 * 1024)" |
|
|
|
|
|
|
|
Accept="image/*" |
|
|
|
|
|
|
|
@bind-ProgressPercent="progressPercent" |
|
|
|
|
|
|
|
OnCompleted="@OnCompletedAsync"> |
|
|
|
|
|
|
|
<ChildContent> |
|
|
|
|
|
|
|
<label for="my-file-uploader"> |
|
|
|
|
|
|
|
<FluentIcon Value="@(new Icons.Regular.Size24.ArrowUpload())"/> |
|
|
|
|
|
|
|
</label> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
Drag files here you wish to upload, |
|
|
|
|
|
|
|
or <label for="my-file-uploader">browse</label> |
|
|
|
|
|
|
|
for them<span style="color: red">*</span>. |
|
|
|
|
|
|
|
<br /> |
|
|
|
|
|
|
|
<em>Maximum of 4 files allowed.</em> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<br/> |
|
|
|
|
|
|
|
<a href="https://www.fluentui-blazor.net/">Read more about officail FluentUI-Blazor page.</a> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</ChildContent> |
|
|
|
|
|
|
|
</FluentInputFile> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@if (inputFiles.Any()) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
<FluentLabel Typo="Typography.H5">File(s) uploaded:</FluentLabel> |
|
|
|
|
|
|
|
<ul> |
|
|
|
|
|
|
|
@foreach (var file in inputFiles) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
<li> |
|
|
|
|
|
|
|
<b>@file.Name</b> 🔸 |
|
|
|
|
|
|
|
@($"{Decimal.Divide(file.Size, 1024):N} KB") 🔸 |
|
|
|
|
|
|
|
@file.ContentType 🔸 |
|
|
|
|
|
|
|
@file.LocalFile?.FullName |
|
|
|
|
|
|
|
@file.ErrorMessage |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<FluentLabel Class="mt-1" Typo="Typography.Body" Weight="FontWeight.Bold">@message</FluentLabel> |
|
|
|
|
|
|
|
</FluentCard> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Manual Upload</FluentLabel> |
|
|
|
|
|
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto"> |
|
|
|
|
|
|
|
<FluentInputFile @ref="fileUploader" |
|
|
|
|
|
|
|
DragDropZoneVisible="false" |
|
|
|
|
|
|
|
Mode="InputFileMode.SaveToTemporaryFolder" |
|
|
|
|
|
|
|
Multiple="true" |
|
|
|
|
|
|
|
AnchorId="MyUploadButton" |
|
|
|
|
|
|
|
MaximumFileSize="@(100 * 1024 * 1024)" |
|
|
|
|
|
|
|
Accept=".mp4, .mov, .avi, .jpg, .png, .svg" |
|
|
|
|
|
|
|
OnProgressChange="@(e => |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
progressPercent = e.ProgressPercent; |
|
|
|
|
|
|
|
progressTitle = e.ProgressTitle; |
|
|
|
|
|
|
|
})" |
|
|
|
|
|
|
|
OnCompleted="OnCompleted"/> |
|
|
|
|
|
|
|
<FluentProgress Min="0" Max="100" Visible="@(progressPercent > 0)" Value="@progressPercent"/> |
|
|
|
|
|
|
|
<FluentLabel Alignment="HorizontalAlignment.Center">@progressTitle</FluentLabel> |
|
|
|
|
|
|
|
<FluentButton Id="MyUploadButton" Appearance="Appearance.Accent">Upload files</FluentButton> |
|
|
|
|
|
|
|
@if (inputFiles.Any()) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
<FluentLabel Typo="Typography.H5">File(s) uploaded:</FluentLabel> |
|
|
|
|
|
|
|
<ul> |
|
|
|
|
|
|
|
@foreach (var file in inputFiles) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
<li> |
|
|
|
|
|
|
|
<b>@file.Name</b> 🔸 |
|
|
|
|
|
|
|
@($"{Decimal.Divide(file.Size, 1024):N} KB") 🔸 |
|
|
|
|
|
|
|
@file.ContentType 🔸 |
|
|
|
|
|
|
|
@file.LocalFile?.FullName |
|
|
|
|
|
|
|
@file.ErrorMessage |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</FluentCard> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Buffer, Stream Mode</FluentLabel> |
|
|
|
|
|
|
|
<FluentLabel Typo="Typography.Body"> |
|
|
|
|
|
|
|
Please refers <a href="https://www.fluentui-blazor.net/InputFile" target="_blank" >Officail FluentUI-Blazor page</a>. |
|
|
|
|
|
|
|
</FluentLabel> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@code { |
|
|
|
|
|
|
|
int progressPercent = 0; |
|
|
|
|
|
|
|
FluentInputFileEventArgs[] inputFiles = Array.Empty<FluentInputFileEventArgs>(); |
|
|
|
|
|
|
|
string message = "Message console: "; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
StringBuilder stringBuilder = new StringBuilder(); |
|
|
|
|
|
|
|
private async Task OnCompletedAsync(IEnumerable<FluentInputFileEventArgs> files) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
stringBuilder.Clear(); |
|
|
|
|
|
|
|
stringBuilder.Append("Meesage console: "); |
|
|
|
|
|
|
|
inputFiles = files.ToArray(); |
|
|
|
|
|
|
|
foreach (var file in inputFiles) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
stringBuilder.Append($"{file.Name} is handled. "); |
|
|
|
|
|
|
|
message = stringBuilder.ToString(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
await Task.Delay(3000); |
|
|
|
|
|
|
|
progressPercent = 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
FluentInputFile? fileUploader = default; |
|
|
|
|
|
|
|
string? progressTitle; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private void OnCompleted(IEnumerable<FluentInputFileEventArgs> files) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
stringBuilder.Clear(); |
|
|
|
|
|
|
|
stringBuilder.Append("Meesage console: "); |
|
|
|
|
|
|
|
inputFiles = files.ToArray(); |
|
|
|
|
|
|
|
progressPercent = fileUploader!.ProgressPercent; |
|
|
|
|
|
|
|
progressTitle = fileUploader!.ProgressTitle; |
|
|
|
|
|
|
|
foreach (var file in inputFiles) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
stringBuilder.Append($"{file.Name} is handled. "); |
|
|
|
|
|
|
|
message = stringBuilder.ToString(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
