https://github.com/soenneker/soenneker.blazor.filepond
A Blazor interop library for the file upload library FilePond
https://github.com/soenneker/soenneker.blazor.filepond
blazor csharp dotnet file filepond filepondinterop interop upload
Last synced: about 2 months ago
JSON representation
A Blazor interop library for the file upload library FilePond
- Host: GitHub
- URL: https://github.com/soenneker/soenneker.blazor.filepond
- Owner: soenneker
- License: mit
- Created: 2024-01-07T02:57:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-27T04:40:45.000Z (5 months ago)
- Last Synced: 2026-01-27T10:44:14.194Z (5 months ago)
- Topics: blazor, csharp, dotnet, file, filepond, filepondinterop, interop, upload
- Language: HTML
- Homepage: https://soenneker.com
- Size: 4.03 MB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://www.nuget.org/packages/soenneker.blazor.filepond/)
[](https://github.com/soenneker/soenneker.blazor.filepond/actions/workflows/publish-package.yml)
[](https://www.nuget.org/packages/soenneker.blazor.filepond/)
[](https://soenneker.github.io/soenneker.blazor.filepond)
[](https://github.com/soenneker/soenneker.blazor.filepond/actions/workflows/codeql.yml)
#  Soenneker.Blazor.FilePond
### A Blazor interop library for the file upload library [FilePond](https://pqina.nl/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](https://pqina.nl/filepond/docs/) for details.
## Installation
```
dotnet add package Soenneker.Blazor.FilePond
```
### Add the following to your `Startup.cs` file
```csharp
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
```razor
@using Soenneker.Blazor.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.
```razor
@using Soenneker.Blazor.FilePond
@using Soenneker.Blazor.FilePond.Dtos
@code {
private FilePond? FilePond { get; set; }
private readonly FilePondOptions _options = new()
{
InstantUpload = true
};
private async ValueTask 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
```razor
@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
```csharp
// 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
```csharp
// 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
```csharp
// Set all files as successful
await FilePond.SetAllFilesSuccess(true);
// Clear all success states
await FilePond.SetAllFilesSuccess(false);
```
### Example: Auto-success on File Upload
```csharp
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`