Blazor Input File

The Blazor Input File component empowers users to select a single file from their device storage. Once a file is selected, it is uploaded to the server in manageable chunks. Developers are not required to adjust the maximum size of SignalR's message. Moreover, both users and developers have the flexibility to pause, resume, or cancel the upload process.

Features:

JavaScript Usage: Enables dynamic functionality with JavaScript.

Appearance customization: Customizable styles and themes.

Rendering options: Render your component as various HTML tags for maximum flexibility and integration.

Learn about core component featuresLearn about input component features

Simple file input (default chunk size)

Uploaded byte: 0
<BlazorInputFile @bind-Value="FileContent1" />
<div>Uploaded byte: @(FileContent1?.LongLength ?? 0)</div>

@code {
    public byte[] FileContent1 { get; set; }
}

File input with chunk size, upload status, file metadata, select image file only

Upload Status: Uploading 0/0 Completed? False
Uploaded File: , type: , size: 0, last modified: 0
<BlazorInputFile @bind-Value="FileContent2" ChunkSize="ChunkSize.Kilobyte(1)" FileMetadataChanged="metadata => File2Metadata = metadata" UploadStatusChanged="status => File2UploadStatus = status" accept="image/*" />
<div>Upload Status: Uploading @File2UploadStatus.UploadedSize/@File2UploadStatus.TotalSize Completed? @File2UploadStatus.Completed</div>
<div>Uploaded File: @File2Metadata.Name, type: @File2Metadata.Type, size: @File2Metadata.Size, last modified: @File2Metadata.LastModified</div>
<img src="@PreviewImage()" />

@code {
    public byte[] FileContent2 { get; set; }
    public FileUploadStatus File2UploadStatus { get; set; } = new();
    public FileMetadata File2Metadata { get; set; } = FileMetadata.Empty;

    private string PreviewImage()
    {
        if (FileContent2 is not null)
        {
            string base64 = Convert.ToBase64String(FileContent2);

            return $"data:image/png;base64,{base64}";
        }
        else
        {
            return "";
        }
    }
}

Upload with control (upload speed throttled to 0.1KB)

Select a file to begin

Upload Status: Uploading 0/0 False
<BlazorInputFile @bind-Value="FileContent3" ChunkSize="ChunkSize.Kilobyte(0.1f)" UploadStatusChanged="status => File3UploadStatus = status" />
<div>
    @if (File3UploadStatus.State is InputFileComponentState.NotStarted)
    {
        <p>Select a file to begin</p>
    }

    @if (File3UploadStatus.State is InputFileComponentState.Paused)
    {
        <BlazorButton type="button" Variants="new[] {BaseVariants.Success}" @onclick="File3UploadStatus.Resume">Resume</BlazorButton>
    }

    @if (File3UploadStatus.State is InputFileComponentState.Uploading)
    {
        <BlazorButton type="button" Variants="new[] {BaseVariants.Warning}" @onclick="File3UploadStatus.Pause">Pause</BlazorButton>
        <BlazorButton type="button" Variants="new[] {BaseVariants.Danger}" @onclick="File3UploadStatus.Cancel">Cancel</BlazorButton>
    }

    @if (File3UploadStatus.State is InputFileComponentState.Completed)
    {
        <p>Upload completed!</p>
    }
</div>
<div>Upload Status: Uploading @File3UploadStatus.UploadedSize/@File3UploadStatus.TotalSize @File3UploadStatus.Completed</div>

@code {
    public byte[] FileContent3 { get; set; }
    public FileUploadStatus File3UploadStatus { get; set; } = new();
}

Disabled input:

<BlazorLabel>
    <BlazorInputFile @bind-Value="..." @bind-disabled="Disabled" />
</BlazorLabel>
<BlazorButton type="button" @onclick="_ => Disabled = !Disabled" Variants="Disabled?new[] {BaseVariants.Success}:new[] {BaseVariants.Danger}">@(Disabled ? "Enable" : "Disable")</BlazorButton>

@code {
    public bool Disabled { get; set; } = true;
}

Appearance Customization

Learn about Theme Feature
Component & Variants CSS class
BlazorFormControl form-control
BlazorFormControl.invalid border-danger
BlazorFormControl.valid border-success

Parameters

BlazorInputFile

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.
Value byte[] The value of the input.
UpdateOnHtmlEvent string This parameter allows you to specify which HTML event should trigger a re-render or update of the component. When the specified event occurs on the input element, the component will initiate the parsing process, updating its internal value to reflect the UI input. Default event is onchange.
ValueParsed EventCallback<ParseEventArgs> Specify an action or method to be executed when the component parses a value, whether the parsing operation succeeds or fails.
FieldState FieldState Represents the state of a field or input element within the component. Can be used to track and manage the state of the field and display relevant messages to the user.
ParseValueHandler Func<string?, TValue?> Implement specialized parsing logic for the component, such as handling user input, converting strings to specific data types, which corresponds to the type of the Value parameter in the component and performing validation during the parsing process.
FileMetadataChanged EventCallback<FileMetadata> This event is triggered when a user selects a file, providing essential information such as the file name, size, type, and last modified timestamp
ChunkSize long Specifies the size of each data chunk in bytes. Developers should carefully consider their requirements when setting this value. Developers should ensure that the chunk size does not exceed SignalR's message size limit when using Blazor Server. For Blazor WebAssembly, it's advisable to retain the default setting.
UploadStatusChanged EventCallback<FileUploadStatus> This event is triggered throughout the entire upload process, providing comprehensive details regarding the upload progress. This information includes the total size of the file, the amount already uploaded, whether the upload is complete, and the current state of the component (whether it's in the NotStarted, Uploading, Paused, or Completed state). Additionally, it offers methods to control the upload, such as pausing, resuming, and cancelling the operation.

Methods

BlazorInputFile

Name Description
PauseUploadAsync() Pause the upload progress.
ResumeUploadAsync() Resume the upload progress.
CancelUploadAsync() Cancel the upload progress.

ChunkSize

Name Description
Kilobyte(float kb) Calculate the chunk size by kilobyte
An error has occurred. This application may no longer respond until reloaded. Reload 🗙