{"id":24271668,"url":"https://github.com/soenneker/soenneker.blazor.filepond","last_synced_at":"2026-05-12T23:01:43.635Z","repository":{"id":216991717,"uuid":"739946159","full_name":"soenneker/soenneker.blazor.filepond","owner":"soenneker","description":"A Blazor interop library for the file upload library FilePond","archived":false,"fork":false,"pushed_at":"2026-01-27T04:40:45.000Z","size":4225,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-27T10:44:14.194Z","etag":null,"topics":["blazor","csharp","dotnet","file","filepond","filepondinterop","interop","upload"],"latest_commit_sha":null,"homepage":"https://soenneker.com","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/soenneker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"soenneker","buy_me_a_coffee":"soenneker","thanks_dev":"soenneker","ko_fi":"soenneker","patreon":"soenneker"}},"created_at":"2024-01-07T02:57:12.000Z","updated_at":"2026-01-27T01:01:33.000Z","dependencies_parsed_at":"2024-03-16T21:57:22.612Z","dependency_job_id":"d7119ff7-0be5-42a8-a8e3-beb61cb82af3","html_url":"https://github.com/soenneker/soenneker.blazor.filepond","commit_stats":null,"previous_names":["soenneker/soenneker.blazor.filepond"],"tags_count":333,"template":false,"template_full_name":null,"purl":"pkg:github/soenneker/soenneker.blazor.filepond","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soenneker%2Fsoenneker.blazor.filepond","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soenneker%2Fsoenneker.blazor.filepond/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soenneker%2Fsoenneker.blazor.filepond/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soenneker%2Fsoenneker.blazor.filepond/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soenneker","download_url":"https://codeload.github.com/soenneker/soenneker.blazor.filepond/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soenneker%2Fsoenneker.blazor.filepond/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28875447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T09:47:23.353Z","status":"ssl_error","status_checked_at":"2026-01-29T09:47:19.357Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","csharp","dotnet","file","filepond","filepondinterop","interop","upload"],"created_at":"2025-01-15T17:59:14.021Z","updated_at":"2026-04-01T23:56:24.875Z","avatar_url":"https://github.com/soenneker.png","language":"HTML","funding_links":["https://github.com/sponsors/soenneker","https://buymeacoffee.com/soenneker","https://thanks.dev/soenneker","https://ko-fi.com/soenneker","https://patreon.com/soenneker"],"categories":[],"sub_categories":[],"readme":"[![](https://img.shields.io/nuget/v/soenneker.blazor.filepond.svg?style=for-the-badge\u0026logo=nuget)](https://www.nuget.org/packages/soenneker.blazor.filepond/)\n[![](https://img.shields.io/github/actions/workflow/status/soenneker/soenneker.blazor.filepond/publish-package.yml?style=for-the-badge\u0026logo=github)](https://github.com/soenneker/soenneker.blazor.filepond/actions/workflows/publish-package.yml)\n[![](https://img.shields.io/nuget/dt/soenneker.blazor.filepond.svg?style=for-the-badge\u0026logo=nuget)](https://www.nuget.org/packages/soenneker.blazor.filepond/)\n[![](https://img.shields.io/badge/Demo-Live-blueviolet?style=for-the-badge\u0026logo=github)](https://soenneker.github.io/soenneker.blazor.filepond)\n[![](https://img.shields.io/github/actions/workflow/status/soenneker/soenneker.blazor.filepond/codeql.yml?label=CodeQL\u0026style=for-the-badge)](https://github.com/soenneker/soenneker.blazor.filepond/actions/workflows/codeql.yml)\n\n# ![](https://user-images.githubusercontent.com/4441470/224455560-91ed3ee7-f510-4041-a8d2-3fc093025112.png) Soenneker.Blazor.FilePond\n### A Blazor interop library for the file upload library [FilePond](https://pqina.nl/filepond/)\n\nThis 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.\n\nDiligence was taken to align the Blazor API with JS. Refer to the [FilePond documentation](https://pqina.nl/filepond/docs/) for details.\n\n## Installation\n\n```\ndotnet add package Soenneker.Blazor.FilePond\n```\n\n### Add the following to your `Startup.cs` file\n\n```csharp\npublic void ConfigureServices(IServiceCollection services)\n{\n    services.AddFilePond();\n}\n```\n\n? Do not include styles or scripts on the page as they get lazily injected automatically, including most plugins.\n\n## Usage\n\n```razor\n@using Soenneker.Blazor.FilePond\n\n\u003cFilePond @ref=\"FilePond\" Options=\"_options\" OnAddFile=\"OnAddFile\"\u003e\u003c/FilePond\u003e\n\n@code{\n    private FilePond? FilePond { get; set; }\n\n    private readonly FilePondOptions _options = new()\n    {\n        MaxFiles = 20,\n        AllowMultiple = true,\n        EnabledPlugins = [FilePondPluginType.ImagePreview]\n    };\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (firstRender)\n        {\n            await FilePond.AddFile(\"https://picsum.photos/500/500\");\n        }\n    }\n\n    private async Task OnAddFile((FilePondError? error, FilePondFileItem fileItem) obj)\n    {\n        Logger.LogInformation(\"OnAddFile fired: Filename: {fileName}\", obj.fileItem.Filename);\n        Stream? stream = await FilePond!.GetStreamForFile();\n        // do something with the stream\n        await stream.DisposeAsync();\n    }\n}\n```\n\n## Blazor-Driven `server.process`\n\nUse `OnServerProcess` when you want Blazor to own FilePond's `server.process` flow while still updating FilePond's built-in upload progress UI.\n\n```razor\n@using Soenneker.Blazor.FilePond\n@using Soenneker.Blazor.FilePond.Dtos\n\n\u003cFilePond @ref=\"FilePond\" Options=\"_options\" OnServerProcess=\"UploadAsync\"\u003e\u003c/FilePond\u003e\n\n@code {\n    private FilePond? FilePond { get; set; }\n\n    private readonly FilePondOptions _options = new()\n    {\n        InstantUpload = true\n    };\n\n    private async ValueTask\u003cstring\u003e UploadAsync(FilePondServerProcessRequest request, CancellationToken cancellationToken)\n    {\n        await using Stream? stream = await request.GetStream(cancellationToken: cancellationToken);\n\n        if (stream == null)\n            throw new InvalidOperationException(\"Could not open the FilePond upload stream.\");\n\n        // Wire this to your real HTTP upload progress callback.\n        await request.ReportProgress(true, stream.Length, stream.Length, cancellationToken);\n\n        // Return the server file id that FilePond should store.\n        return \"server-file-id\";\n    }\n}\n```\n\n`request.GetStream()` returns the same file data FilePond would normally upload, and `request.ReportProgress(...)` pushes progress back into FilePond so the upload bar stays in sync with your Blazor-driven upload.\n\n## Validation Features\n\nThe FilePond component supports validation states with visual feedback and error messages.\n\n### Basic Validation\n\n```razor\n\u003cFilePond @ref=\"FilePond\" \n          IsValid=\"@_isValid\"\n          ValidationErrorMessage=\"@_validationErrorMessage\"\u003e\n\u003c/FilePond\u003e\n\n@code {\n    private bool _isValid = true;\n    private string? _validationErrorMessage;\n\n    private async Task ValidateFiles()\n    {\n        var files = await FilePond!.GetFiles();\n        if (files?.Count == 0)\n        {\n            await FilePond.SetValidationState(false, \"Please select at least one file.\");\n        }\n        else\n        {\n            await FilePond.SetValidationState(true);\n        }\n    }\n}\n```\n\n### Programmatic Validation Control\n\n```csharp\n// Set validation state\nawait FilePond.SetValidationState(false, \"Custom error message\");\n\n// Clear validation state\nawait FilePond.SetValidationState(true);\n```\n\n## File Success States\n\nYou can programmatically set files to appear green (success state) within FilePond.\n\n### Setting Individual File Success\n\n```csharp\n// Set a specific file as successful by ID\nawait FilePond.SetFileSuccess(fileId, true);\n\n// Set a specific file as successful by index\nawait FilePond.SetFileSuccess(0, true);\n\n// Clear success state\nawait FilePond.SetFileSuccess(fileId, false);\n\n// Set file success when the file is fully processed and ready (recommended)\nawait FilePond.SetFileSuccessWhenReady(fileId, true);\n```\n\n### Setting All Files Success\n\n```csharp\n// Set all files as successful\nawait FilePond.SetAllFilesSuccess(true);\n\n// Clear all success states\nawait FilePond.SetAllFilesSuccess(false);\n```\n\n### Example: Auto-success on File Upload\n\n```csharp\nprivate async Task OnAddFile((FilePondError? error, FilePondFileItem fileItem) obj)\n{\n    // Process the file...\n    \n    // Set the file as successful when it's ready (recommended approach)\n    await FilePond!.SetFileSuccessWhenReady(obj.fileItem.Id, true);\n}\n```\n\n## Demo\n\nCheck out the demo project for complete examples:\n- Basic usage: `/`\n- Validation \u0026 Success features: `/validation-demo`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoenneker%2Fsoenneker.blazor.filepond","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoenneker%2Fsoenneker.blazor.filepond","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoenneker%2Fsoenneker.blazor.filepond/lists"}