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