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

1. Add the following to your _Imports.razor file

@using Soenneker.Blazor.FilePond

2. Add the following to your Startup.cs file

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

3. Add the stylesheet to your wwwroot/index.html file

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/filepond@4.30.6/dist/filepond.min.css">

4. Add the scripts to your wwwroot/index.html file

<script src="https://cdn.jsdelivr.net/npm/filepond@4.30.6/dist/filepond.min.js"></script>
<script src="_content/Soenneker.Blazor.FilePond/filepondinterop.js"></script>

Usage

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

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

    private readonly FilePondOptions _options = new()
    {
        MaxFiles = 20,
        AllowMultiple = true
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Add any plugins you want to use
            //await FilePond!.EnablePlugins(FilePondPluginType.FileValidateType, FilePondPluginType.ImagePreview);
        }
    }

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