👁 Image
Soenneker.Blazor.FilePond 4.0.3716

👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image

👁 alternate text is missing from this package README image
Soenneker.Blazor.FilePond

A Blazor interop library for the file upload library FilePond

This library simplifies the integration of FilePond into Blazor applications, providing access to options, methods, plugins, and events. A demo project showcasing common usages is included.

Diligence was taken to align the Blazor API with JS. Refer to the FilePond documentation for details.

Installation

dotnet add package Soenneker.Blazor.FilePond

Add the following to your Startup.cs file

public void ConfigureServices(IServiceCollection services)
{
 services.AddFilePond();
}

? Do not include styles or scripts on the page as they get lazily injected automatically, including most plugins.

Usage

@using Soenneker.Blazor.FilePond

<FilePond @ref="FilePond" Options="_options" OnAddFile="OnAddFile"></FilePond>

@code{
 private FilePond? FilePond { get; set; }

 private readonly FilePondOptions _options = new()
 {
 MaxFiles = 20,
 AllowMultiple = true,
 EnabledPlugins = [FilePondPluginType.ImagePreview]
 };

 protected override async Task OnAfterRenderAsync(bool firstRender)
 {
 if (firstRender)
 {
 await FilePond.AddFile("https://picsum.photos/500/500");
 }
 }

 private async Task OnAddFile((FilePondError? error, FilePondFileItem fileItem) obj)
 {
 Logger.LogInformation("OnAddFile fired: Filename: {fileName}", obj.fileItem.Filename);
 Stream? stream = await FilePond!.GetStreamForFile();
 // do something with the stream
 await stream.DisposeAsync();
 }
}

Blazor-Driven server.process

Use OnServerProcess when you want Blazor to own FilePond's server.process flow while still updating FilePond's built-in upload progress UI.

@using Soenneker.Blazor.FilePond
@using Soenneker.Blazor.FilePond.Dtos

<FilePond @ref="FilePond" Options="_options" OnServerProcess="UploadAsync"></FilePond>

@code {
 private FilePond? FilePond { get; set; }

 private readonly FilePondOptions _options = new()
 {
 InstantUpload = true
 };

 private async ValueTask<string> UploadAsync(FilePondServerProcessRequest request, CancellationToken cancellationToken)
 {
 await using Stream? stream = await request.GetStream(cancellationToken: cancellationToken);

 if (stream == null)
 throw new InvalidOperationException("Could not open the FilePond upload stream.");

 // Wire this to your real HTTP upload progress callback.
 await request.ReportProgress(true, stream.Length, stream.Length, cancellationToken);

 // Return the server file id that FilePond should store.
 return "server-file-id";
 }
}

request.GetStream() returns the same file data FilePond would normally upload, and request.ReportProgress(...) pushes progress back into FilePond so the upload bar stays in sync with your Blazor-driven upload.

Validation Features

The FilePond component supports validation states with visual feedback and error messages.

Basic Validation

<FilePond @ref="FilePond" 
 IsValid="@_isValid"
 ValidationErrorMessage="@_validationErrorMessage">
</FilePond>

@code {
 private bool _isValid = true;
 private string? _validationErrorMessage;

 private async Task ValidateFiles()
 {
 var files = await FilePond!.GetFiles();
 if (files?.Count == 0)
 {
 await FilePond.SetValidationState(false, "Please select at least one file.");
 }
 else
 {
 await FilePond.SetValidationState(true);
 }
 }
}

Programmatic Validation Control

// Set validation state
await FilePond.SetValidationState(false, "Custom error message");

// Clear validation state
await FilePond.SetValidationState(true);

File Success States

You can programmatically set files to appear green (success state) within FilePond.

Setting Individual File Success

// Set a specific file as successful by ID
await FilePond.SetFileSuccess(fileId, true);

// Set a specific file as successful by index
await FilePond.SetFileSuccess(0, true);

// Clear success state
await FilePond.SetFileSuccess(fileId, false);

// Set file success when the file is fully processed and ready (recommended)
await FilePond.SetFileSuccessWhenReady(fileId, true);

Setting All Files Success

// Set all files as successful
await FilePond.SetAllFilesSuccess(true);

// Clear all success states
await FilePond.SetAllFilesSuccess(false);

Example: Auto-success on File Upload

private async Task OnAddFile((FilePondError? error, FilePondFileItem fileItem) obj)
{
 // Process the file...
 
 // Set the file as successful when it's ready (recommended approach)
 await FilePond!.SetFileSuccessWhenReady(obj.fileItem.Id, true);
}

Demo

Check out the demo project for complete examples:

• Basic usage: /
• Validation & Success features: /validation-demo