[FluentInputFile] Fix the manual upload on iOS

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

@@ -1,4 +1,5 @@
 <FluentInputFile @ref="@myFileByBuffer"
+                 AnchorId="MyUploadBuffer"
                  DragDropZoneVisible="false"
                  Mode="InputFileMode.Buffer"
                  Multiple="true"
@@ -12,8 +13,7 @@
     @progressTitle
 </FluentLabel>
 
-<FluentButton Appearance="Appearance.Accent"
-@onclick="@(async e => { IsCanceled = false; await myFileByBuffer!.ShowFilesDialogAsync(); })">
+<FluentButton Appearance="Appearance.Accent" Id="MyUploadBuffer">
     Upload files
 </FluentButton>
 

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

@@ -1,22 +1,22 @@
-<FluentInputFile @ref="@myFileUploader"
-                DragDropZoneVisible="false"
-                Multiple=true
-                MaximumFileSize="@(100 * 1024 * 1024)"
-                Accept=".mp4, .mov, .avi"
-                OnProgressChange="@(e =>
-                    {
-                        progressPercent = e.ProgressPercent; 
-                        progressTitle = e.ProgressTitle;
-                    })"
-                OnCompleted="@OnCompleted" />
+<FluentInputFile @ref="@myFileUploader" 
+                 DragDropZoneVisible="false"
+                 Multiple="true"
+                 AnchorId="MyUploadButton"
+                 MaximumFileSize="@(100 * 1024 * 1024)"
+                 Accept=".mp4, .mov, .avi"
+                 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 Appearance="Appearance.Accent"
-             @onclick="@(async e => await myFileUploader!.ShowFilesDialogAsync())">
+<FluentButton Id="MyUploadButton" Appearance="Appearance.Accent">
     Upload files
 </FluentButton>
 

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

@@ -1,19 +1,19 @@
 <FluentInputFile @ref="@myFileByStream"
-                DragDropZoneVisible="false"
-                Mode="InputFileMode.Stream"
-                Multiple="true"
-                MaximumFileSize="@(20 * 1024 * 1024)"
-                Accept=".mp4, .mov, .avi"
-                OnFileUploaded="@OnFileUploadedAsync"
-                OnCompleted="@OnCompleted" />
+                 AnchorId="MyUploadStream"
+                 DragDropZoneVisible="false"
+                 Mode="InputFileMode.Stream"
+                 Multiple="true"
+                 MaximumFileSize="@(20 * 1024 * 1024)"
+                 Accept=".mp4, .mov, .avi"
+                 OnFileUploaded="@OnFileUploadedAsync"
+                 OnCompleted="@OnCompleted" />
 
 <FluentProgress Min="0" Max="100" Value="@progressPercent" Visible="@(progressPercent > 0)" />
 <FluentLabel Alignment="HorizontalAlignment.Center">
     @progressTitle
 </FluentLabel>
 
-<FluentButton Appearance="Appearance.Accent"
-             @onclick="@(async e => await myFileByStream!.ShowFilesDialogAsync() )">
+<FluentButton Appearance="Appearance.Accent" Id="MyUploadStream">
     Upload files
 </FluentButton>
 

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

@@ -132,6 +132,11 @@ public partial class FluentInputFile : FluentComponentBase
     [Parameter]
     public EventCallback<IEnumerable<FluentInputFileEventArgs>> OnCompleted { get; set; }
 
+    /// <summary>
+    /// Identifier of the source component clickable by the end user.
+    /// </summary>
+    [Parameter]
+    public string AnchorId { get; set; } = string.Empty;
 
     public FluentInputFile()
     {
@@ -140,6 +145,8 @@ public FluentInputFile()
 
     /// <summary>
     /// Open the dialogbox to select files.
+    /// Use <see cref="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>
     /// <returns></returns>
     public async Task ShowFilesDialogAsync()
@@ -149,6 +156,17 @@ public async Task ShowFilesDialogAsync()
         await Module.InvokeVoidAsync("raiseFluentInputFile", Id);
     }
 
+    /// <summary />
+    protected override async Task OnInitializedAsync()
+    {
+        if (!string.IsNullOrEmpty(AnchorId))
+        {
+            Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE);
+
+            await Module.InvokeVoidAsync("attachClickHandler", AnchorId, Id);
+        }
+    }
+
     /// <summary />
     protected async Task OnUploadFilesHandlerAsync(InputFileChangeEventArgs e)
     {

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

@@ -1,10 +1,20 @@
-export function raiseFluentInputFile(id) {
-    var item = document.getElementById(id);
+export function raiseFluentInputFile(fileInputId) {
+    var item = document.getElementById(fileInputId);
     if (!!item) {
         item.click();
     }
 }
 
+export function attachClickHandler(buttonId, fileInputId) {
+    var button = document.getElementById(buttonId);
+    var fileInput = document.getElementById(fileInputId);
+    if (button && fileInput) {
+        button.addEventListener("click", function (e) {
+            fileInput.click();
+        });
+    }
+}
+
 export function previewImage(inputElem, index, imgElem) {
     const url = URL.createObjectURL(inputElem.files[index]);
     imgElem.addEventListener('load', () => URL.revokeObjectURL(url), { once: true });