Class RadzenFileInput<TValue>

A file input component that reads selected files and binds their content as base64 strings or byte arrays. RadzenFileInput provides client-side file reading without server upload, ideal for form fields or immediate file processing. Unlike RadzenUpload which sends files to a server, FileInput reads files on the client and binds the content to a property. Useful for form integration (including file content in form models without separate upload), client-side processing (processing files in browser for image preview, parsing, etc.), embedded storage (storing file content in database as base64 or binary), and avoiding server-side upload endpoints when file content is part of form data. Reads the selected file and binds it as TValue = string for base64-encoded data URL (e.g., "data:image/png;base64,iVBORw0K...") or TValue = byte[] for raw binary file content. For image files, automatically shows a preview. Use MaxFileSize to limit file size.

Inheritance
object
ComponentBase
RadzenComponent
FormComponent<TValue>
RadzenFileInput<TValue>
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
public class RadzenFileInput<TValue> : FormComponent<TValue>, IComponent, IHandleEvent, IHandleAfterRender, IDisposable, IRadzenFormComponent
Type Parameters
Name Description
TValue

The type of the bound value. Use string for base64-encoded content or byte[] for binary data.
Examples

File input binding to string (base64):

<RadzenFileInput @bind-Value=@model.PhotoData TValue="string" />
@code {
    class Employee
    {
        public string PhotoData { get; set; } // Contains base64 image data
    }
    Employee model = new Employee();
}

File input binding to byte array:

<RadzenFileInput @bind-Value=@fileContent TValue="byte[]" Accept="image/*" MaxFileSize="2000000" />
@code {
    byte[] fileContent;
}

Constructors

RadzenFileInput()

A file input component that reads selected files and binds their content as base64 strings or byte arrays. RadzenFileInput provides client-side file reading without server upload, ideal for form fields or immediate file processing. Unlike RadzenUpload which sends files to a server, FileInput reads files on the client and binds the content to a property. Useful for form integration (including file content in form models without separate upload), client-side processing (processing files in browser for image preview, parsing, etc.), embedded storage (storing file content in database as base64 or binary), and avoiding server-side upload endpoints when file content is part of form data. Reads the selected file and binds it as TValue = string for base64-encoded data URL (e.g., "data:image/png;base64,iVBORw0K...") or TValue = byte[] for raw binary file content. For image files, automatically shows a preview. Use MaxFileSize to limit file size.

Declaration
public RadzenFileInput()
Examples

File input binding to string (base64):

<RadzenFileInput @bind-Value=@model.PhotoData TValue="string" />
@code {
    class Employee
    {
        public string PhotoData { get; set; } // Contains base64 image data
    }
    Employee model = new Employee();
}

File input binding to byte array:

<RadzenFileInput @bind-Value=@fileContent TValue="byte[]" Accept="image/*" MaxFileSize="2000000" />
@code {
    byte[] fileContent;
}

Fields

fileUpload

Gets file input reference.

Declaration
protected ElementReference fileUpload
Field Value
Type Description
ElementReference

Properties

Accept

Gets or sets the comma-separated accepted MIME types.

Declaration
[Parameter]
public string Accept { get; set; }
Property Value
Type Description
string

The comma-separated accepted MIME types.

ChooseText

Gets or sets the choose button text.

Declaration
[Parameter]
public string ChooseText { get; set; }
Property Value
Type Description
string

The choose button text.

DeleteText

Gets or sets the delete button text.

Declaration
[Parameter]
public string DeleteText { get; set; }
Property Value
Type Description
string

The delete button text.

Error

Gets or sets the error callback.

Declaration
[Parameter]
public EventCallback<UploadErrorEventArgs> Error { get; set; }
Property Value
Type Description
EventCallback<UploadErrorEventArgs>

The error callback.

FileName

Gets or sets the image file name.

Declaration
[Parameter]
public string FileName { get; set; }
Property Value
Type Description
string

The image file name.

FileNameChanged

Gets or sets the FileName changed.

Declaration
[Parameter]
public EventCallback<string> FileNameChanged { get; set; }
Property Value
Type Description
EventCallback<string>

The FileName changed.

FileSize

Gets or sets the image file size.

Declaration
[Parameter]
public long? FileSize { get; set; }
Property Value
Type Description
long?

The image file size.

FileSizeChanged

Gets or sets the FileSize changed.

Declaration
[Parameter]
public EventCallback<long?> FileSizeChanged { get; set; }
Property Value
Type Description
EventCallback<long?>

The FileSize changed.

ImageAlternateText

Gets or sets the text.

Declaration
[Parameter]
public string ImageAlternateText { get; set; }
Property Value
Type Description
string

The text.

ImageClick

Gets or sets the image click callback.

Declaration
[Parameter]
public EventCallback<MouseEventArgs> ImageClick { get; set; }
Property Value
Type Description
EventCallback<MouseEventArgs>

The image click callback.

ImageStyle

Gets or sets the image style.

Declaration
[Parameter]
public string ImageStyle { get; set; }
Property Value
Type Description
string

The image style.

InputAttributes

Specifies additional custom attributes that will be rendered by the input.

Declaration
[Parameter]
public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
Property Value
Type Description
IReadOnlyDictionary<string, object>

The attributes.

MaxFileSize

Gets or sets the maximum size of the file.

Declaration
[Parameter]
public int MaxFileSize { get; set; }
Property Value
Type Description
int

The maximum size of the file.

MaxHeight

Gets or sets the maximum height of the file, keeping aspect ratio.

Declaration
[Parameter]
public int MaxHeight { get; set; }
Property Value
Type Description
int

The maximum height of the file.

MaxWidth

Gets or sets the maximum width of the file, keeping aspect ratio.

Declaration
[Parameter]
public int MaxWidth { get; set; }
Property Value
Type Description
int

The maximum width of the file.

Title

Gets or sets the title.

Declaration
[Parameter]
public string Title { get; set; }
Property Value
Type Description
string

The title.

Methods

BuildRenderTree(RenderTreeBuilder)

A file input component that reads selected files and binds their content as base64 strings or byte arrays. RadzenFileInput provides client-side file reading without server upload, ideal for form fields or immediate file processing. Unlike RadzenUpload which sends files to a server, FileInput reads files on the client and binds the content to a property. Useful for form integration (including file content in form models without separate upload), client-side processing (processing files in browser for image preview, parsing, etc.), embedded storage (storing file content in database as base64 or binary), and avoiding server-side upload endpoints when file content is part of form data. Reads the selected file and binds it as TValue = string for base64-encoded data URL (e.g., "data:image/png;base64,iVBORw0K...") or TValue = byte[] for raw binary file content. For image files, automatically shows a preview. Use MaxFileSize to limit file size.

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

GetComponentCssClass()

Gets the component CSS class.

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string
Overrides

OnAfterRenderAsync(bool)

Called by the Blazor runtime.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender
Returns
Type Description
Task
Overrides

OnChange(IEnumerable<PreviewFileInfo>)

Called on file change.

Declaration
[JSInvokable("RadzenUpload.OnChange")]
public Task OnChange(IEnumerable<PreviewFileInfo> files)
Parameters
Type Name Description
IEnumerable<PreviewFileInfo> files

The file.
Returns
Type Description
Task

OnImageClick(MouseEventArgs)

Handles the ImageClick event.

Declaration
public Task OnImageClick(MouseEventArgs args)
Parameters
Type Name Description
MouseEventArgs args

The MouseEventArgs instance containing the event data.
Returns
Type Description
Task

SetParametersAsync(ParameterView)

Sets the parameters asynchronous.

Declaration
public override Task SetParametersAsync(ParameterView parameters)
Parameters
Type Name Description
ParameterView parameters

The parameters.
Returns
Type Description
Task

Task.
Overrides

Implements

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.

Learn More

Download Now