Can Blazor programatically trigger a click on a hidden InputFile without JavaScript?

Question

Can I trigger a click on a hidden input type file element?

<InputFile OnChange="@LoadFiles" multiple hidden />
<button class="btn btn-secondary" @onclick="SelectFile" type="button"><i class="icons8-upload"></i> Upload file(s)</button>

@code {
    private void SelectFile() {
        //click the InputFile without JS
    }

    protected async Task LoadFiles(InputFileChangeEventArgs e) {
       // do something
    }
}

Is there a way in Blazor to do that without JavaScript?

Answer 1

If the reason you need this is so that you can customise the appearance of the input control, then here's a little trick you can use:

<label class="btn btn-secondary" for="input-file">
    <i class="icons8-upload"></i> Upload file(s)
</label>
<InputFile OnChange="@LoadFiles" id="input-file" multiple hidden />

@code {
    private void LoadFiles(InputFileChangeEventArgs e)
    {
        
    }
}

The label has the for attribute specified so when it gets clicked it opens the file input dialog.