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
@using Soenneker.Blazor.FilePond
public void ConfigureServices(IServiceCollection services)
{
services.AddFilePond();
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/filepond@4.31.1/dist/filepond.min.css" integrity="sha256-a95jYCBL4++k1XyLYgulKmY33bIJIVYMsJO/RNytaJM=" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/filepond@4.31.1/dist/filepond.min.js" integrity="sha256-6yXpr8+sATA4Q2ANTyZmpn4ZGP7grbIRNpe9s0Y+iO0=" crossorigin="anonymous"></script>
<script src="_content/Soenneker.Blazor.FilePond/filepondinterop.js"></script>
<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();
}
}