Skip to content

Commit

Permalink
[InputFile] Add ProgressTemplate and a bindable ProgressPercent attri…
Browse files Browse the repository at this point in the history 
…bute (#1037)

* Add ProgressPercent and refactorization

* Update resource and doc

* Fix fileinput style

* Add Unit Tests

* ProgressTitle Read only
  • Loading branch information
@dvoituron
dvoituron authored Nov 29, 2023
1 parent a3e49bf commit 41bc71d
Show file tree
Hide file tree
Showing 16 changed files with 360 additions and 410 deletions.
82 changes: 35 additions & 47 deletions examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -758,6 +758,11 @@
Gets or sets the state of the CheckBox: true, false or null.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentCheckbox.CheckStateChanged">
<summary>
Gets or sets a callback that updates the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentCheckbox.CheckState"/>.
</summary>
</member>
<member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentCheckbox.SetCurrentAndIntermediate(System.Nullable{System.Boolean})">
<summary />
</member>
Expand Down Expand Up @@ -3444,6 +3449,9 @@
<member name="T:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile">
<summary />
</member>
<member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.#ctor">
<summary />
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.JSRuntime">
<summary />
</member>
Expand Down Expand Up @@ -3504,19 +3512,14 @@
Default is true.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.ProgressTitle">
<summary>
Gets or sets the current label display when an upload is in progress.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.ProgressPercent">
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.ChildContent">
<summary>
Gets or sets the current global value of the percentage of a current upload.
Gets or sets the child content of the component.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.ChildContent">
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.ProgressTemplate">
<summary>
Gets or sets the child content of the component.
Gets or sets the progress content of the component.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.OnInputFileChange">
Expand All @@ -3538,7 +3541,7 @@
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.OnFileError">
<summary>
Raise when a file raised an error.
Raise when a file raised an error. Not yet used.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.OnCompleted">
Expand All @@ -3551,9 +3554,30 @@
Gets or sets the identifier of the source component clickable by the end user.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.ProgressTitle">
<summary>
Gets the current label display when an upload is in progress.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.ProgressPercent">
<summary>
Gets or sets the current global value of the percentage of a current upload.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.ProgressPercentChanged">
<summary>
Gets or sets a callback that updates the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.ProgressPercent"/>.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.ProgressFileDetails">
<summary />
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.ProgressStyle">
<summary />
</member>
<member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.ShowFilesDialogAsync">
<summary>
Open the dialogbox to select files.
Open the dialog-box to select files.
Use <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.AnchorId"/> instead to specify the ID of the button (for example) on which the user should click.
⚠️ This method doesn't work on Safari and iOS.
</summary>
Expand Down Expand Up @@ -11292,42 +11316,6 @@
If set to true, add the FluentTooltipProvider component at end of the MainLayout.razor page.
</summary>
</member>
<member name="T:Microsoft.FluentUI.AspNetCore.Components.Resources.FluentInputFileResource">
<summary>
A strongly-typed resource class, for looking up localized strings, etc.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.Resources.FluentInputFileResource.ResourceManager">
<summary>
Returns the cached ResourceManager instance used by this class.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.Resources.FluentInputFileResource.Culture">
<summary>
Overrides the current thread's CurrentUICulture property for all
resource lookups using this strongly typed resource class.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.Resources.FluentInputFileResource.LoadingAfter">
<summary>
Looks up a localized string similar to Completed.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.Resources.FluentInputFileResource.LoadingBefore">
<summary>
Looks up a localized string similar to Loading....
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.Resources.FluentInputFileResource.LoadingCanceled">
<summary>
Looks up a localized string similar to Canceled.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.Resources.FluentInputFileResource.LoadingInProgress">
<summary>
Looks up a localized string similar to Loading {0}/{1} - {2}.
</summary>
</member>
<member name="T:Microsoft.FluentUI.AspNetCore.Components.Resources.TimeAgoResource">
<summary>
A strongly-typed resource class, for looking up localized strings, etc.
Expand Down
54 changes: 26 additions & 28 deletions examples/Demo/Shared/Pages/InputFile/Examples/InputFileDefault.razor
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,30 @@
<FluentInputFile Id="my-file-uploader"
Mode="InputFileMode.SaveToTemporaryFolder"
Multiple="true"
ShowPreview="true"
MaximumFileCount="4"
MaximumFileSize="50000000"
MaximumFileSize="@(10*1024*1024)"
Accept="image/*"
OnCompleted="@OnCompleted"
OnFileError="@OnError"
Style="height: 300px;"
Class="demopanel">
@bind-ProgressPercent="@ProgressPercent"
OnCompleted="@OnCompletedAsync"
Style="height: 300px; border: 1px dashed var(--accent-fill-rest);">
<ChildContent>
<label for="my-file-uploader">
<FluentIcon Value="@(new @Icons.Regular.Size24.ArrowUpload())" />
</label>

<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="#">Read more about our supported file formats.</a>
</div>
<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="#">Read more about our supported file formats.</a>
</div>
</ChildContent>
</FluentInputFile>

@if (Files.Any())
Expand All @@ -39,7 +37,7 @@
<b>@file.Name</b> 🔹
@($"{Decimal.Divide(file.Size, 1024):N} KB") 🔹
@file.ContentType 🔹
@file.LocalFile?.FullName
@file.LocalFile?.FullName
@file.ErrorMessage
</li>
}
Expand All @@ -48,9 +46,10 @@

@code
{
int ProgressPercent = 0;
FluentInputFileEventArgs[] Files = Array.Empty<FluentInputFileEventArgs>();

void OnCompleted(IEnumerable<FluentInputFileEventArgs> files)
private async Task OnCompletedAsync(IEnumerable<FluentInputFileEventArgs> files)
{
Files = files.ToArray();

Expand All @@ -59,10 +58,9 @@
{
file.LocalFile?.Delete();
}
}

void OnError(FluentInputFileEventArgs file)
{
DemoLogger.WriteLine($"Error: {file.ErrorMessage}");
// Wait 3 seconds before to reset the progress bar.
await Task.Delay(3000);
ProgressPercent = 0;
}
}
10 changes: 10 additions & 0 deletions examples/Demo/Shared/Pages/InputFile/InputFilePage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,16 @@

<p>The <code>FluentInputFile</code> wraps the native Blazor <code>InputFile</code> component and extends it with drag/drop zone support. See the examples below for some different ways on how to use this component.</p>

<p>
<b>Customization:</b> You can localize this component by customizing the content of <code>ChildContent</code>, but also the content of the progress area via the <code>ProgressTemplate</code> attribute.
The default progress area displays <i>Loading</i>, <i>Completed</i> or <i>Canceled</i> labels via static variables <code>FluentInputFile.ResourceLoadingXXX</code>.
These can be accessed to globally adapt the default display if you wish.
</p>

<blockquote>
<b>note</b>: This component is not yet fully compatible with accessibility.
</blockquote>

<h2 id="example">Examples</h2>

<div>
Expand Down
3 changes: 3 additions & 0 deletions src/Core/Components/Checkbox/FluentCheckbox.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,9 @@ public bool? CheckState
}
}

/// <summary>
/// Gets or sets a callback that updates the <see cref="CheckState"/>.
/// </summary>
[Parameter]
public EventCallback<bool?> CheckStateChanged { get; set; }

Expand Down
18 changes: 11 additions & 7 deletions src/Core/Components/InputFile/FluentInputFile.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,20 @@

@ChildContent

<div class="progress">
<FluentProgress Visible="@(ProgressPercent > 0)"
Min="0"
Max="100"
Value="@ProgressPercent" /><br />
@ProgressTitle
<div class="inputfile-progress" style="@ProgressStyle">
@if (ProgressTemplate == null)
{
<FluentProgress Min="0" Max="100" Value="@ProgressPercent" /><br />
@ProgressTitle
}
else
{
@ProgressTemplate(ProgressPercent > 0 ? ProgressFileDetails with { Percentage = ProgressPercent } : new ProgressFileDetails())
}
</div>
</div>

<div style="grid-column: 1; grid-row: 1; z-index: @(DropOver ? ZIndex.InputFileDropZone : null)">
<div style="grid-column: 1; grid-row: 1; @(DropOver ? $"z-index: {ZIndex.InputFileDropZone}" : null)">
<InputFile OnChange="OnUploadFilesHandlerAsync"
id="@Id"
multiple=@Multiple
Expand Down
Loading

0 comments on commit 41bc71d

Please sign in to comment.