Table of Contents

Class TwFileUpload

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Represents a file upload input component that allows users to select and upload files. This component provides properties for handling file selection events and configuring multiple file selection. It inherits from TwBlazorInputComponentBase, which provides common input component functionality such as labeling and disabled state management.

public class TwFileUpload : TwBlazorInputComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent, ITwInputComponent
Inheritance
TwFileUpload
Implements
Inherited Members

Constructors

TwFileUpload() 

public TwFileUpload()

Properties

AllowedFileTypes

Optional list of allowed file types (MIME types or extensions) to restrict selectable files in the UI. Example values: new[]{".png",".jpg","image/pdf","application/pdf"} These values will be joined and applied to the input's "accept" attribute.

[Parameter]
public IEnumerable<string>? AllowedFileTypes { get; set; }

Property Value

IEnumerable<string>

Color 

[Parameter]
public Color? Color { get; set; }

Property Value

Color?

Files

Two-way bindable file list. Parent can bind this with @bind-Files to keep synchronized.

[Parameter]
public List<IBrowserFile>? Files { get; set; }

Property Value

List<IBrowserFile>

FilesChanged 

[Parameter]
public EventCallback<List<IBrowserFile>?> FilesChanged { get; set; }

Property Value

EventCallback<List<IBrowserFile>>

Icon

The icon displayed at the start of the input, the default is Cloud_Upload, if you would like this blank explicity set this to null.

[Parameter]
public Icon? Icon { get; set; }

Property Value

Icon?

Multiple

Gets or sets a value indicating whether the file input should allow multiple file selection. When true, the user can select more than one file; when false, only a single file can be selected.

[Parameter]
public bool Multiple { get; set; }

Property Value

bool

OnChange

Gets or sets the event callback that is invoked when the user selects one or more files using the file input.

[Parameter]
public EventCallback<InputFileChangeEventArgs> OnChange { get; set; }

Property Value

EventCallback<InputFileChangeEventArgs>

Variant

The button variant style applied to the upload input.

[Parameter]
public ButtonVariant? Variant { get; set; }

Property Value

ButtonVariant?

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

OnParametersSet()

Invoked when the component's parameters have been set. Ensures that the component has a unique identifier by generating one if none is provided.

protected override void OnParametersSet()

Remarks

If the component's identifier is not set, a unique ID is generated based on the component's type name (with a 'Tw' prefix removed if present) and a GUID. This helps ensure that each component instance can be uniquely identified, which is useful for scenarios such as associating labels with form elements or targeting elements in client-side scripts.

RemoveFile(IBrowserFile)

Remove a file from the component and update the two-way bound Files list. Call this from parent via @ref or from inside the component UI.

public Task RemoveFile(IBrowserFile file)

Parameters

file IBrowserFile

Returns

Task
Edit this page