Forms

TwFileUpload

TwFileUpload is a Blazor file upload component. Bind Files, restrict types with AllowedFileTypes, allow Multiple files and handle OnChange.

Last updated 24 September 2026

Basic File Upload

Use Icon, Label, Variant and Color to style the upload button, and Multiple to allow more than one file.

Upload file

Upload multiple files

Upload a document

Disabled upload input

Razor

<div class="space-y-4">
    <TwFileUpload Id="basic-file-upload" Icon="@Icon.Upload" Label="Upload file" Variant="ButtonVariant.Outlined" Color="Color.Success" />
    <TwFileUpload Id="multiple-file-upload" Icon="@Icon.Files" Label="Upload multiple files" Multiple Variant="ButtonVariant.Filled" Color="Color.Accent" />
    <TwFileUpload Id="basic-file-upload-2" Icon="Icon.Cloud_Upload" Label="Upload a document" Color="Color.Primary" Variant="ButtonVariant.Outlined" />
    <TwFileUpload Id="basic-file-upload-3" Icon="Icon.Airplane_Fill" Disabled Label="Disabled upload input" Variant="ButtonVariant.Filled" Color="Color.Accent" />
</div>

Binding

Bind @bind-Files to access the list of selected files.

Bind files

Selected files

Razor

<div class="space-y-4">
    <TwFileUpload Id="binding-upload" Icon="@Icon.Upload" Label="Bind files" Multiple @bind-Files="@boundFiles" Variant="ButtonVariant.Outlined" Color="Color.Primary" />

    <div class="mt-2">
        <strong>Selected files</strong>
        <ul>
            @foreach (var f in boundFiles ?? Enumerable.Empty<IBrowserFile>())
            {
                <li>@f.Name (@(f.Size) bytes)</li>
            }
        </ul>
    </div>
</div>

CSHARP

@code {
    private List<IBrowserFile>? boundFiles = new();
}

Accept (Allowed file types)

Use AllowedFileTypes to restrict which file types can be selected, via the accept attribute.

Upload images only

Razor

<div class="space-y-4">
    <TwFileUpload Id="accept-upload" Icon="@Icon.Upload" Label="Upload images only" AllowedFileTypes="@(new[] { ".png", ".jpg", "image/png", "image/jpeg" })" Variant="ButtonVariant.Filled" Color="Color.Primary" />
</div>

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwButtonTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Inherited from TwButton - this component reuses that theme rather than defining its own.

Property	Type	Controls
`ButtonRounded`	Rounded?
`ButtonShadow`	Shadow?
`DefaultVariant`	ButtonVariant?
`ButtonUppercase`	bool
`Uppercase`	string
`Base`	string
`Padding`	string
`DensePadding`	string
`IconButton`	string
`Typography`	string
`IconTypography`	string
`DisabledCursor`	string
`ReadonlyCursor`	string
`DefaultCursor`	string
`DisabledFilled`	string
`DisabledOutlined`	string
`DisabledText`	string

Full reference: TwButtonTheme on the API docs.