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 3 hours 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 (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-19T06:25:01.000Z (28 days ago)
• Last Synced: 2024-12-19T09:16:03.057Z (27 days ago)
• Topics: blazor, csharp, dotnet, file, filepond, filepondinterop, interop, upload
• Language: C#
• Homepage: https://soenneker.com
• Size: 2.04 MB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![](https://img.shields.io/nuget/v/soenneker.blazor.filepond.svg?style=for-the-badge)](https://www.nuget.org/packages/soenneker.blazor.filepond/)

[![](https://img.shields.io/github/actions/workflow/status/soenneker/soenneker.blazor.filepond/publish-package.yml?style=for-the-badge)](https://github.com/soenneker/soenneker.blazor.filepond/actions/workflows/publish-package.yml)

[![](https://img.shields.io/nuget/dt/soenneker.blazor.filepond.svg?style=for-the-badge)](https://www.nuget.org/packages/soenneker.blazor.filepond/)

# ![](https://user-images.githubusercontent.com/4441470/224455560-91ed3ee7-f510-4041-a8d2-3fc093025112.png) 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();

    }

}

```