Soenneker.Blazor.FilePond 4.0.3530

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();
    }
}

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