Blazor file input click not working in firefox

Describe the bug

Trigger a click event via Javascript on an input element of type file is not working. When searching the web for my problem i found this stackoverflow thread. I already opened an issue here #20228 but it was closed with the reason: “Firefox security issue” which is not right.

To Reproduce

Create an hidden input file element in a razor component. Then create a button. On the button click call a void, inside the void method call the IJsRuntime invoke method to trigger your js function that clicks the input file element by id.

It’s not a firefox security feature. Plain html is working. See here: https://jsfiddle.net/chxnbmqt/

There are many other way’s to achieve custom styling of a file input element (already implemented another way). Still i think this may be a bug related to blazor.

Further technical details

• ASP.NET Core version
• Include the output of dotnet --info
• The IDE (VS / VS Code/ VS4Mac) you’re running on, and it’s version

IDE: VS

<TargetFramework>netcoreapp3.1</TargetFramework>

dotnet --info: .NET Core SDK: Version: 3.1.101 Commit: b377529961

Laufzeitumgebung: OS Name: Windows OS Version: 10.0.18362 OS Platform: Windows RID: win10-x64 Base Path: C:\Program Files\dotnet\sdk\3.1.101\

Host (useful for support): Version: 3.1.2 Commit: 916b5cba26

.NET Core SDKs installed: 2.2.207 [C:\Program Files\dotnet\sdk] 3.1.101 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed: Microsoft.AspNetCore.All 2.1.15 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.All 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.App 2.1.15 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 2.1.15 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.2 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 3.1.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

[fabianschurz]

@captainsafia Thanks for your deep investigation on this.

The workaround is to use plain HTML and JS.

<input type="file" id="fileInput" style="display: none;" onchange="YourAfterFileSelectedMethod"/> 
<button onclick="ClickFileInput()">Import</button>

function ClickFileInput() {
    document.getElementById('fileInput').click();
}

[mkArtakMSFT]

Hi. Thanks for contacting us. We’re closing this issue as there was not much community interest in this ask for quite a while now. You can learn more about our triage process and how we handle issues by reading our Triage Process writeup.