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.
dotnet add package Soenneker.Blazor.FilePond
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.
@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();
}
}The FilePond component supports validation states with visual feedback and error messages.
<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);
}
}
}// Set validation state
await FilePond.SetValidationState(false, "Custom error message");
// Clear validation state
await FilePond.SetValidationState(true);You can programmatically set files to appear green (success state) within FilePond.
// 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);// Set all files as successful
await FilePond.SetAllFilesSuccess(true);
// Clear all success states
await FilePond.SetAllFilesSuccess(false);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);
}Check out the demo project for complete examples:
- Basic usage:
/ - Validation & Success features:
/validation-demo