<InputFile>

This is a prototype for a file input component that may be added to Blazor in the future.

For installation and usage information, see this blog post.

Using a custom button with MatBlazor:

<MatButton OnClick="@(() => OnButtonClick("myInput"))" Label="Choose File"></MatButton>
<InputFile IsElementHidden="true" OnChange="HandleFileSelected" ElementId="myInput"> </InputFile>

@if (file != null)
{
    <p>Name: @file.Name</p>
    <p>Size in bytes: @file.Size</p>
    <p>Last modified date: @file.LastModified.ToShortDateString()</p>
    <p>Content type (not always supplied by the browser): @file.Type</p>
}

@code {

    public async void OnButtonClick(string elementID)
    {
        await JSRuntime.InvokeAsync<string>("BlazorInputFile.wrapInput", elementID);
    }

    IFileListEntry file;

    void HandleFileSelected(IFileListEntry[] files)
    {
        file = files.FirstOrDefault();
    }

}

Reference from here