MudBlazor - Blazor Component Library

File Upload

To create a file upload button, two elements are needed: an activator (using the ActivatorContent parameter) and an input.

The MudFileUpload component provides public ClearAsync and OpenFilePickerAsync methods that can be used as OnClick events for buttons.

After uploading the files, you will receive an IReadOnlyList<IBrowserFile> or IBrowserFile and you will need to manually handle the upload in HandleFilesChanged. Instead of using multiple to allow multiple files, you set T to IReadOnlyList<IBrowserFile>. Using IBrowserFile restricts the component to a single file.

API

<MudFileUpload>

Use any type of MudButton

Use a MudButton, a MudIconButton or a MudFab with the ActivatorContent render fragment. A MudFileUpload can be Disabled and it will disable its child button automatically.

0 Files:

<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
    <ActivatorContent>
        <MudButton Variant="Variant.Filled"
                   Color="Color.Primary"
                   StartIcon="@Icons.Material.Filled.CloudUpload">
            Upload Files
        </MudButton>
    </ActivatorContent>
</MudFileUpload>

<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
    <ActivatorContent>
        <MudFab Color="Color.Secondary"
                StartIcon="@Icons.Material.Filled.Image"
                Label="Load picture" />
    </ActivatorContent>
</MudFileUpload>

<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
    <ActivatorContent>
        <MudFab Color="Color.Success"
                StartIcon="@Icons.Material.Filled.AttachFile" />
    </ActivatorContent>
</MudFileUpload>

<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
    <ActivatorContent>
        <MudIconButton Color="Color.Info"
                       Icon="@Icons.Material.Filled.PhotoCamera">
        </MudIconButton>
    </ActivatorContent>
</MudFileUpload>

<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles" Disabled>
    <ActivatorContent>
        <MudButton Variant="Variant.Filled"
                   Color="Color.Primary">
            Disabled Button
        </MudButton>
    </ActivatorContent>
</MudFileUpload>

@if (_files != null)
{
    <MudText Typo="@Typo.h6">@_files.Count() File@(_files.Count() == 1 ? "" : "s"):</MudText>
    <MudList T="string">
        @foreach (var file in _files)
        {
            <MudListItem Icon="@Icons.Material.Filled.AttachFile" @key="@file">
                @file.Name <code>@file.Size bytes</code>
            </MudListItem>
        }
    </MudList>
}

@code
{
    IList<IBrowserFile> _files = new List<IBrowserFile>();
    private void UploadFiles(IBrowserFile file)
    {
        _files.Add(file);
        //TODO upload the files to the server
    }
}

Multiple and Accept

Allow multiple files with T="IReadOnlyList<IBrowserFile>" or limit the valid file types with Accept. To upload more than 10 files, you must specify a MaximumFileCount.

Note: Some browsers or platforms may require specific values for the Accept attribute.

In MAUI using an Android device for example, you should use Accept="image/png, image/jpg" rather than Accept=".png, .jpg".
Refer to the MAUI docs for more information.

<MudFileUpload T="IReadOnlyList<IBrowserFile>" FilesChanged="UploadFiles">
    <ActivatorContent>
        <MudButton Variant="Variant.Filled"
                   Color="Color.Primary"
                   StartIcon="@Icons.Material.Filled.CloudUpload">
            Multiple Files
        </MudButton>
    </ActivatorContent>
</MudFileUpload>

<MudFileUpload T="IBrowserFile" Accept=".pdf" FilesChanged="UploadFiles2" MaximumFileCount="100">
    <ActivatorContent>
        <MudButton Variant="Variant.Filled"
                   Color="Color.Primary"
                   StartIcon="@Icons.Material.Filled.CloudUpload">
            Only .pdf files
        </MudButton>
    </ActivatorContent>
</MudFileUpload>


<MudFileUpload T="IBrowserFile" Accept=".png, .jpg" FilesChanged="UploadFiles2" MaximumFileCount="100">
    <ActivatorContent>
        <MudButton Variant="Variant.Filled"
                   Color="Color.Primary"
                   StartIcon="@Icons.Material.Filled.CloudUpload">
            Only image files
        </MudButton>
    </ActivatorContent>
</MudFileUpload>

@if (files != null)
{
    <MudList T="string">
        @foreach (var file in files)
        {
            <MudListItem Icon="@Icons.Material.Filled.AttachFile">
                @file.Name <code>@file.Size bytes</code>
            </MudListItem>
        }
    </MudList>
}

@code
{
    IList<IBrowserFile> files = new List<IBrowserFile>();
    private void UploadFiles(IReadOnlyList<IBrowserFile> files)
    {
        foreach (var file in files)
        {
            this.files.Add(file);
        }
        //TODO upload the files to the server
    }

    private void UploadFiles2(IBrowserFile file)
    {
        files.Add(file);
        //TODO upload the files to the server
    }
}