fix: FluentInputFile does not work as expected in mobile

[StevenRasmussen]

🐛 Bug Report

When trying to trigger the FilesDialog by calling the FluentInputFile.ShowFilesDialogAsync() method, the dialog is not shown in a mobile browser and so there is no way to upload an image when trying to trigger it from a button or some other element. This may only be an issue with Blazor Server as it appears to work fine on the demo site, which I'm assuming is Blazor WASM.

💻 Repro or Code Sample

Here is the code that I am using:

<FluentInputFile @ref=_fluentInputFileRef Style="border: 1px dashed" />
<FluentButton Title="Upload File" OnClick="@(async e => await _fluentInputFileRef.ShowFilesDialogAsync())">Upload File</FluentButton>

@code {
    private FluentInputFile _fluentInputFileRef = null!;
}

You can test this on your mobile device here: https://cedarvalleybands.azurewebsites.net/FileInputIssue *** Note that this works as expected in a desktop browser... just not on mobile (at least MS Edge on iPhone).

🤔 Expected Behavior

The dialog should open on mobile similar to this image:

😯 Current Behavior

The dialog does not open.

🌍 Your Environment

• iPhone 13
• Browser: Microsoft Edge Mobile
• Fluent v3.1.1

[dvoituron]

Cause

The ShowFilesDialogAsync method is pretty simple. It uses JSInterop to call the click JavaScript method of the <input type="file" /> element inside the component HTML output.

Safari requires the file input dialog to open programmatically as a direct result of a user action. If the file input is clicked programmatically, this must happen in JavaScript code, which handles a user event.

JSInterop cannot be directly associated with a user action, due to its nature. A .NET method itself is not directly triggered by user action. For example, an @onclick Blazor handler will react to the click user event and call a .NET handler. However, the subsequent server-client JSInterop call that executes JavaScript code will no longer have relationship with the user action that started the whole sequence.

Solution

In the PR #815, the ShowFilesDialogAsync method has been marked obsolete in favor of the new AnchorId attribute. When set, the attachClickHandler JavaScript method attaches the Click event to this Anchor (e.g. Button) to simulate the click on the InputFile.

Example:

<FluentInputFile AnchorId="MyUploadButton" />
<FluentButton Id="MyUploadButton">Upload files</FluentButton>

This fix will be published in the next Release.

[StevenRasmussen]

@dvoituron - Thanks! BTW - This is such a GREAT project with great support! Keep up the good work!

[Henry64]

Hi all, sorry but the issue referred to FluentInputFile that not fire any Dialog to select files is still present on Bing/ Chrome Browser. Have y any idea to fix ? tks fro y great support