Data

TwAttachment

TwAttachment is a Blazor file attachment chip for chat surfaces, with a preview or file type icon, size, upload progress, errors, retry and remove actions.

Last updated 20 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

Give TwAttachment a FileName and a FileSize in bytes. The icon is picked from the file's extension, or from its ContentType when you pass one.

quarterly-report.pdf2.3 MB · PDF

budget.xlsx47.1 KB · XLSX

notes.md1.2 KB · MD

Program.cs8.8 KB · CS

RAZOR

<div class="flex flex-wrap gap-3">
    <TwAttachment FileName="quarterly-report.pdf" FileSize="2_457_600" />
    <TwAttachment FileName="budget.xlsx" FileSize="48_230" />
    <TwAttachment FileName="notes.md" FileSize="1_204" />
    <TwAttachment FileName="Program.cs" FileSize="8_960" />
</div>

Preview

Set PreviewSrc to show a thumbnail. If it fails to load, the attachment falls back to the file type icon.

logo.svg3 KB · SVG

holiday.png1 MB · PNG

RAZOR

<div class="flex flex-wrap gap-3">
    <TwAttachment FileName="logo.svg" FileSize="3_120" PreviewSrc="_content/TwBlazor.Docs/images/logo.svg" />
    <TwAttachment FileName="holiday.png" FileSize="1_048_576" PreviewSrc="/images/missing-picture.png" ContentType="image/png" />
</div>

Upload states

Set Status to show where the upload is. While Uploading, pass Progress from 0 to 100, or leave it unset when the progress is not known. When it Failed, an error is shown and an OnRetry callback adds a retry button.

design-spec.pdf5 MB · PDF

video.mp4

archive.zipFile is larger than 25 MB

RAZOR

<div class="flex flex-col gap-3">
    <div class="flex flex-wrap gap-3">
        <TwAttachment FileName="design-spec.pdf" FileSize="5_242_880" Status="@_status" Progress="@_progress" OnRetry="UploadAsync" OnRemove="Reset" />
        <TwAttachment FileName="video.mp4" Status="AttachmentStatus.Uploading" />
        <TwAttachment FileName="archive.zip" Status="AttachmentStatus.Failed" ErrorText="File is larger than 25 MB" OnRetry="@(() => { })" OnRemove="@(() => { })" />
    </div>
    <div class="flex gap-2">
        <TwButton Label="Upload" OnClick="UploadAsync" Disabled="@(_status == AttachmentStatus.Uploading)" Variant="ButtonVariant.Filled" Color="Color.Primary" />
        <TwButton Label="Fail upload" Variant="ButtonVariant.Outlined" OnClick="Fail" />
    </div>
</div>

CSHARP

@code {
    private AttachmentStatus _status = AttachmentStatus.Ready;
    private double? _progress;
    
    private async Task UploadAsync()
    {
        _status = AttachmentStatus.Uploading;
        for (_progress = 0; _progress < 100 && _status == AttachmentStatus.Uploading; _progress += 10)
        {
            StateHasChanged();
            await Task.Delay(250);
        }
    
        if (_status == AttachmentStatus.Uploading)
        {
            _status = AttachmentStatus.Ready;
        }
    }
    
    private void Fail() => _status = AttachmentStatus.Failed;
    
    private void Reset()
    {
        _status = AttachmentStatus.Ready;
        _progress = null;
    }
}

Removable list

Set OnRemove to add a remove button that names the file, for example in the list of files waiting to be sent with a message.

brief.pdf117.2 KB · PDF

moodboard.png117.2 KB · PNG

copy-deck.docx117.2 KB · DOCX

RAZOR

<div class="flex flex-wrap gap-3">
    @foreach (var file in _files)
    {
        <TwAttachment @key="file" FileName="@file" FileSize="120_000" OnRemove="@(() => _files.Remove(file))" />
    }
    @if (_files.Count == 0)
    {
        <p class="text-sm text-gray-600 dark:text-gray-300">No files attached.</p>
    }
</div>

CSHARP

@code {
    private readonly List<string> _files = ["brief.pdf", "moodboard.png", "copy-deck.docx"];
}

Links and actions

Set Href to make the file name a link once the file is ready. Use Actions for extra buttons, which sit before the built-in ones.

contract.docx93.8 KB · DOCX

RAZOR

<TwAttachment FileName="contract.docx" FileSize="96_000" Href="#" OnRemove="@(() => { })">
    <Actions>
        <TwIcon Icon="Icon.Download" AriaLabel="Download contract.docx" OnClick="@(() => { })" />
    </Actions>
</TwAttachment>

Accessibility

The attachment is a group named after its file. The preview image is decoration, since the name is written beside it. The remove and retry buttons name the file they act on, and the retry button is described by the error. The upload progress bar is named "Uploading" and the file name, and starting, finishing and failing an upload are announced through a polite live region. A long file name is cut short on screen but read in full, and shown in full on hover.

An attachment is a group named after its file. Its file name is a link once the file is ready, and its retry and remove buttons name the file they act on. Starting, finishing and failing an upload are announced.

Key	What it does
`Tab` or `Shift` plus `Tab`	Moves to the file name link, then to the retry and remove buttons.
`Enter`	Opens the file, retries the upload, or removes the attachment, depending on what has focus.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwAttachmentTheme), 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.

Property	Type	Controls
`Base`	string
`Failed`	string
`Preview`	string
`IconBox`	string
`Details`	string
`Name`	string
`NameLink`	string
`Meta`	string
`Error`	string
`Actions`	string

Full reference: TwAttachmentTheme on the API docs.

TwAttachment

Basic usage

Preview

Upload states

Removable list

Links and actions

Accessibility

Keyboard navigation

Theme configuration