[InputFile] Make it work icw a loading Button

examples/Demo/Shared/Pages/InputFile/Examples/InputFileLoading.razor

@@ -0,0 +1,66 @@
+<FluentInputFile @ref="@myFileUploader"
+                 DragDropZoneVisible="false"
+                 Mode="InputFileMode.SaveToTemporaryFolder"
+                 Multiple="true"
+                 AnchorId="MyUploadLoadingButton"
+                 MaximumFileSize="@(100 * 1024 * 1024)"
+                 Accept=".mp4, .mov, .avi"
+                 OnProgressChange="@(e =>
+                     {
+                         _formUploading = true;
+                         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="MyUploadLoadingButton" Loading="_formUploading" Appearance="Appearance.Accent">
+    Upload files
+</FluentButton>
+
+@if (Files.Any())
+{
+    <h4>File(s) uploaded:</h4>
+    <ul>
+        @foreach (var file in Files)
+        {
+            <li>
+                <b>@file.Name</b> 🔹
+                @($"{Decimal.Divide(file.Size, 1024):N} KB") 🔹
+                @file.ContentType 🔹
+                @file.LocalFile?.FullName
+                @file.ErrorMessage
+            </li>
+        }
+    </ul>
+}
+
+
+@code
+{
+    bool _formUploading;
+    FluentInputFile? myFileUploader = default!;
+    int? progressPercent;
+    string? progressTitle;
+
+    FluentInputFileEventArgs[] Files = Array.Empty<FluentInputFileEventArgs>();
+
+    void OnCompleted(IEnumerable<FluentInputFileEventArgs> files)
+    {
+        Files = files.ToArray();
+        progressPercent = myFileUploader!.ProgressPercent;
+        progressTitle = myFileUploader!.ProgressTitle;
+
+        // For the demo, delete these files.
+        foreach (var file in Files)
+        {
+            file.LocalFile?.Delete();
+        }
+        _formUploading = false;
+        StateHasChanged();
+    }
+}

examples/Demo/Shared/Pages/InputFile/InputFilePage.razor

@@ -33,6 +33,12 @@
         </Description>
     </DemoSection>
 
+    <DemoSection Title="Manual upload with loading indicator" Component="@typeof(InputFileLoading)">
+        <Description>
+
+        </Description>
+    </DemoSection>
+
     <DemoSection Title="Mode = InputFileMode.Buffer" Component="@typeof(InputFileBufferMode)">
         <Description>
 

src/Core/Components/InputFile/FluentInputFile.razor.cs

@@ -12,7 +12,7 @@ public partial class FluentInputFile : FluentComponentBase, IAsyncDisposable
     private ElementReference? _containerElement;
     private InputFile? _inputFile;
     private IJSObjectReference? _containerInstance;
-
+    
     public static string ResourceLoadingBefore = "Loading...";
     public static string ResourceLoadingCompleted = "Completed";
     public static string ResourceLoadingCanceled = "Canceled";
@@ -201,13 +201,13 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
 
-            if (!string.IsNullOrEmpty(AnchorId))
-            {
-                await Module.InvokeVoidAsync("attachClickHandler", AnchorId, Id);
-            }
-
             _containerInstance = await Module.InvokeAsync<IJSObjectReference>("initializeFileDropZone", _containerElement, _inputFile!.Element);
         }
+
+        if (!string.IsNullOrEmpty(AnchorId) && Module is not null)
+        {
+            await Module.InvokeVoidAsync("attachClickHandler", AnchorId, Id);
+        }
     }
 
     /// <summary />

src/Core/Components/InputFile/FluentInputFile.razor.js

@@ -8,10 +8,14 @@ export function raiseFluentInputFile(fileInputId) {
 export function attachClickHandler(buttonId, fileInputId) {
     var button = document.getElementById(buttonId);
     var fileInput = document.getElementById(fileInputId);
-    if (button && fileInput) {
+
+    if (button && fileInput && !button.fluentuiBlazorFileInputHandlerAttached) {
+
         button.addEventListener("click", function (e) {
             fileInput.click();
         });
+
+        button.fluentuiBlazorFileInputHandlerAttached = true;
     }
 }