File Upload

A form component that lets users upload one or more files.

A MudFileUpload handles file selection and validation, but you decide how and when to upload the files.

The component ships with a default button and drag-and-drop area plus a built-in SelectedTemplate to show the chosen files. For advanced layouts, use CustomContent, which exposes the component instance so you can call ClearAsync and OpenFilePickerAsync.

After selection, the component yields an IBrowserFile or an IReadOnlyList<IBrowserFile>. Set T to IReadOnlyList<IBrowserFile> for multiple files, or to IBrowserFile to enforce a single file.

API

<MudFileUpload>

Basic Usage (Single Button or Drag-and-Drop)

Use a MudFileUpload, set T, and choose the options you need. For drag-and-drop, set DragAndDrop to true. The drag area fills its parent by default, and you can target .mud-file-upload-dragarea for additional styling. When Disabled is true, the component disables its internal controls automatically.

Default Button

test1.jpg

Drag and Drop

test1.jpg

test2.jpg

Disabled

<style>
    .mud-file-upload-dragarea {
        height: 150px;
        width: 100%;
    }
</style>

<MudCard Style="width: 25%;height: 300px;">
    <MudCardHeader>
        <MudText Typo="Typo.h6">Default Button</MudText>
    </MudCardHeader>
    <MudCardContent>
        <MudFileUpload @bind-Files="_file"
                       Disabled="_disabled" />
    </MudCardContent>
</MudCard>

<MudCard Style="width: 65%;height:300px;">
    <MudCardHeader>
        <MudText Typo="Typo.h6">Drag and Drop</MudText>
    </MudCardHeader>
    <MudCardContent>
        <MudFileUpload @bind-Files="_files"
                       DragAndDrop="true"
                       Disabled="_disabled" />
    </MudCardContent>
</MudCard>

<MudItem md="12" Class="d-flex justify-center">
    <MudSwitch T="bool" @bind-Value="_disabled" Label="Disabled" LabelPlacement="Placement.Right" />
</MudItem>

@code
{
    private bool _disabled = false;
    private IBrowserFile _file = new DummyBrowserFile("test1.jpg", DateTimeOffset.Now, 0, "image/jpeg", []);
    private IReadOnlyList<IBrowserFile> _files =
    [
        new DummyBrowserFile("test1.jpg", DateTimeOffset.Now, 0, "image/jpeg", []),
        new DummyBrowserFile("test2.jpg", DateTimeOffset.Now, 0, "image/jpeg", []),
    ];

    public class DummyBrowserFile : IBrowserFile
    {
        public string Name { get; }
        public DateTimeOffset LastModified { get; }
        public long Size { get; }
        public string ContentType { get; }
        public byte[] Content { get; }

        public DummyBrowserFile(string name, DateTimeOffset lastModified, long size, string contentType, byte[] content)
        {
            Name = name;
            LastModified = lastModified;
            Size = size;
            ContentType = contentType;
            Content = content;
        }

        public Stream OpenReadStream(long maxAllowedSize = 512000, CancellationToken cancellationToken = default) => new MemoryStream(Content);
    }
}

Custom Content

Use a MudButton, MudIconButton, MudFab, or any custom markup with the CustomContent render fragment. The fragment receives the MudFileUpload context so you can call its API. When Disabled is true, the component disables its child controls automatically.

0 Files:

<MudStack Row Justify="Justify.SpaceAround" AlignItems="AlignItems.Center" Class="mud-width-full">
    <MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
        <CustomContent>
            <MudButton Variant="Variant.Filled"
                       Color="Color.Primary"
                       OnClick="@context.OpenFilePickerAsync"
                       StartIcon="@Icons.Material.Filled.CloudUpload">
                Choose file
            </MudButton>
        </CustomContent>
        <SelectedTemplate />
    </MudFileUpload>

    <MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
        <CustomContent>
            <MudFab Color="Color.Secondary"
                    StartIcon="@Icons.Material.Filled.Image"
                    OnClick="@context.OpenFilePickerAsync"
                    Label="Choose photo" />
        </CustomContent>
        <SelectedTemplate />
    </MudFileUpload>

    <MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
        <CustomContent>
            <MudFab Color="Color.Success"
                    OnClick="@context.OpenFilePickerAsync"
                    StartIcon="@Icons.Material.Filled.AttachFile" />
        </CustomContent>
        <SelectedTemplate />
    </MudFileUpload>

    <MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
        <CustomContent>
            <MudIconButton Color="Color.Info"
                           OnClick="@context.OpenFilePickerAsync"
                           Icon="@Icons.Material.Filled.PhotoCamera">
            </MudIconButton>
        </CustomContent>
        <SelectedTemplate />
    </MudFileUpload>

    <MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles" Disabled>
        <CustomContent>
            <MudButton Variant="Variant.Filled"
                       OnClick="@context.OpenFilePickerAsync"
                       Color="Color.Primary">
                Disabled button
            </MudButton>
        </CustomContent>
        <SelectedTemplate />
    </MudFileUpload>
</MudStack>

<MudFlexBreak />

@if (_files != null)
{
    <MudText Typo="@Typo.h6">@_files.Count() File@(_files.Count() == 1 ? "" : "s"):</MudText>
    @if (_files.Count > 0)
    {
        <MudFlexBreak />
        <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
{
    private readonly IList<IBrowserFile> _files = new List<IBrowserFile>();

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

SelectedTemplate

Use SelectedTemplate to customize how selected files are rendered. If you want to suppress the default chip list, provide an empty <SelectedTemplate /> or SelectedTemplate="@(files => builder => { })". The @context parameter matches T.

test.jpg

No file selected

test1.jpg

test2.jpg

<MudStack Row Justify="Justify.SpaceAround" AlignItems="AlignItems.Start" Class="mud-width-full">
    <MudFileUpload @bind-Files=@_file>
        <CustomContent>
            <MudButton Variant="Variant.Filled"
                       OnClick="@context.OpenFilePickerAsync"
                       Color="Color.Primary">
                Default template
            </MudButton>
        </CustomContent>
    </MudFileUpload>

    <MudFileUpload T="IBrowserFile">
        <CustomContent>
            <MudButton Variant="Variant.Filled"
                       OnClick="@context.OpenFilePickerAsync"
                       Color="Color.Primary">
                Single file
            </MudButton>
        </CustomContent>
        <SelectedTemplate>
            @if (context != null)
            {
                <MudText>@context.Name</MudText>
            }
            else
            {
                <MudText>No file selected</MudText>
            }
        </SelectedTemplate>
    </MudFileUpload>

    <MudFileUpload @bind-Files=@_files>
        <CustomContent>
            <MudButton Variant="Variant.Filled"
                       OnClick="@context.OpenFilePickerAsync"
                       Color="Color.Secondary">
                Multiple files
            </MudButton>
        </CustomContent>
        <SelectedTemplate>
            @if (context != null)
            {
                @foreach (var file in context)
                {
                    <MudText>@file.Name</MudText>
                }
            }
            else
            {
                <MudText>No files selected</MudText>
            }
        </SelectedTemplate>
    </MudFileUpload>

    <MudFileUpload @bind-Files=@_file>
        <CustomContent>
            <MudFab Color="Color.Warning"
                    StartIcon="@Icons.Material.Filled.Image"
                    OnClick="@context.OpenFilePickerAsync"
                    Label="No template" />
        </CustomContent>
        <SelectedTemplate />
    </MudFileUpload>
</MudStack>

@code
{
    private IBrowserFile _file = new DummyBrowserFile("test.jpg", DateTimeOffset.Now, 1024, "image/jpeg", new byte[1024]);
    private IReadOnlyList<IBrowserFile> _files =
    [
        new DummyBrowserFile("test1.jpg", DateTimeOffset.Now, 1024, "image/jpeg", []),
        new DummyBrowserFile("test2.jpg", DateTimeOffset.Now, 1024, "image/jpeg", []),
    ];

    public class DummyBrowserFile : IBrowserFile
    {
        public string Name { get; }
        public DateTimeOffset LastModified { get; }
        public long Size { get; }
        public string ContentType { get; }
        public byte[] Content { get; }

        public DummyBrowserFile(string name, DateTimeOffset lastModified, long size, string contentType, byte[] content)
        {
            Name = name;
            LastModified = lastModified;
            Size = size;
            ContentType = contentType;
            Content = content;
        }

        public Stream OpenReadStream(long maxAllowedSize = 512000, CancellationToken cancellationToken = default) => new MemoryStream(Content);
    }
}