MudBlazor - Blazor Component Library

File Upload

To create a file upload button, two elements are needed: a label or button and an input.

When we set the for attribute to the same value as the id of the input, we enable the input to be triggered by clicking on the label or button. We then hide the input.

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 HtmlTag property set to "label" within the ButtonTemplate render fragment. Be sure to set the button's ID using the @context parameter.
A MudFileUpload can be Disabled and it will Disable its child button automatically.

Upload Files

Load picture

0 Files:

<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
    <ButtonTemplate>
        <MudButton HtmlTag="label"
                   Variant="Variant.Filled"
                   Color="Color.Primary"
                   StartIcon="@Icons.Material.Filled.CloudUpload"
                   for="@context.Id">
            Upload Files
        </MudButton>
    </ButtonTemplate>
</MudFileUpload>

<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
    <ButtonTemplate>
        <MudFab HtmlTag="label"
                Color="Color.Secondary"
                StartIcon="@Icons.Material.Filled.Image"
                Label="Load picture"
                for="@context.Id" />
    </ButtonTemplate>
</MudFileUpload>

<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
    <ButtonTemplate>
        <MudFab HtmlTag="label"
                Color="Color.Success"
                StartIcon="@Icons.Material.Filled.AttachFile"
                for="@context.Id" />
    </ButtonTemplate>
</MudFileUpload>

<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
    <ButtonTemplate>
        <MudIconButton HtmlTag="label"
                       Color="Color.Info"
                       Icon="@Icons.Material.Filled.PhotoCamera"
                       for="@context.Id">
        </MudIconButton>
    </ButtonTemplate>
</MudFileUpload>

<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles" Disabled>
    <ButtonTemplate>
        <MudButton HtmlTag="label"
                   Variant="Variant.Filled"
                   Color="Color.Primary"
                   for="@context.Id">
            Disabled Button
        </MudButton>
    </ButtonTemplate>
</MudFileUpload>

@if (files != null)
{
    <MudText Typo="@Typo.h6">@files.Count() File@(files.Count() == 1 ? "" : "s"):</MudText>
    <MudList>
        @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.

Multiple Files

Only .pdf files

Only image files

<MudFileUpload T="IReadOnlyList<IBrowserFile>" FilesChanged="UploadFiles">
    <ButtonTemplate>
        <MudButton HtmlTag="label"
                   Variant="Variant.Filled"
                   Color="Color.Primary"
                   StartIcon="@Icons.Material.Filled.CloudUpload"
                   for="@context.Id">
            Multiple Files
        </MudButton>
    </ButtonTemplate>
</MudFileUpload>

<MudFileUpload T="IBrowserFile" Accept=".pdf" FilesChanged="UploadFiles2" MaximumFileCount="100">
    <ButtonTemplate>
        <MudButton HtmlTag="label"
                   Variant="Variant.Filled"
                   Color="Color.Primary"
                   StartIcon="@Icons.Material.Filled.CloudUpload"
                   for="@context.Id">
            Only .pdf files
        </MudButton>
    </ButtonTemplate>
</MudFileUpload>


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

@if (files != null)
{
    <MudList>
        @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
    }
}