{"id":15016794,"url":"https://github.com/spatie/livewire-filepond","last_synced_at":"2026-02-01T10:01:09.055Z","repository":{"id":248475886,"uuid":"828236767","full_name":"spatie/livewire-filepond","owner":"spatie","description":"Upload files using Filepond in Livewire components","archived":false,"fork":false,"pushed_at":"2025-12-10T10:13:38.000Z","size":535,"stargazers_count":301,"open_issues_count":4,"forks_count":35,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-12-10T13:34:33.500Z","etag":null,"topics":["filepond","laravel","livewire","php","uploads"],"latest_commit_sha":null,"homepage":"https://spatie.be/open-source","language":"PHP","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/spatie.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"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":"Spatie"}},"created_at":"2024-07-13T14:21:32.000Z","updated_at":"2025-12-10T10:13:42.000Z","dependencies_parsed_at":"2024-07-15T07:47:51.528Z","dependency_job_id":"0ae5b396-d294-455b-952f-f4145d47b6d9","html_url":"https://github.com/spatie/livewire-filepond","commit_stats":{"total_commits":52,"total_committers":11,"mean_commits":"4.7272727272727275","dds":0.5576923076923077,"last_synced_commit":"e8996f08de1bdce2cc274ef9085ec081e8458e6b"},"previous_names":["spatie/livewire-filepond"],"tags_count":13,"template":false,"template_full_name":"spatie/package-skeleton-laravel","purl":"pkg:github/spatie/livewire-filepond","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Flivewire-filepond","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Flivewire-filepond/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Flivewire-filepond/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Flivewire-filepond/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spatie","download_url":"https://codeload.github.com/spatie/livewire-filepond/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Flivewire-filepond/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28975278,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-01T09:57:52.632Z","status":"ssl_error","status_checked_at":"2026-02-01T09:57:49.143Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["filepond","laravel","livewire","php","uploads"],"created_at":"2024-09-24T19:49:23.725Z","updated_at":"2026-02-01T10:01:09.050Z","avatar_url":"https://github.com/spatie.png","language":"PHP","funding_links":["https://github.com/sponsors/Spatie"],"categories":[],"sub_categories":[],"readme":"# Upload files using Filepond in Livewire components\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/spatie/livewire-filepond.svg?style=flat-square)](https://packagist.org/packages/spatie/livewire-filepond)\n[![GitHub Tests Action Status](https://img.shields.io/github/actions/workflow/status/spatie/livewire-filepond/run-tests.yml?branch=main\u0026label=tests\u0026style=flat-square)](https://github.com/spatie/livewire-filepond/actions?query=workflow%3Arun-tests+branch%3Amain)\n[![GitHub Code Style Action Status](https://img.shields.io/github/actions/workflow/status/spatie/livewire-filepond/fix-php-code-style-issues.yml?branch=main\u0026label=code%20style\u0026style=flat-square)](https://github.com/spatie/livewire-filepond/actions?query=workflow%3A\"Fix+PHP+code+style+issues\"+branch%3Amain)\n[![Total Downloads](https://img.shields.io/packagist/dt/spatie/livewire-filepond.svg?style=flat-square)](https://packagist.org/packages/spatie/livewire-filepond)\n\n[Filepond](https://pqina.nl/filepond/) is a powerful JavaScript library to upload files.\n\nThis repository contains a Livewire component that allow you to use Filepond easily in your  projects.\n\nHere's an example of how you can use it in your views:\n\n```bladehtml\n\u003cx-filepond::upload wire:model=\"file\" /\u003e\n```\n\nHere's how it looks like in action in [mailcoach.app](https://mailcoach.app) (a product we built at Spatie):\n\n![screenshot](https://github.com/spatie/livewire-filepond/blob/main/docs/images/upload.png)\n\n## Support us\n\n[\u003cimg src=\"https://github-ads.s3.eu-central-1.amazonaws.com/livewire-filepond.jpg?t=1\" width=\"419px\" /\u003e](https://spatie.be/github-ad-click/livewire-filepond)\n\nWe invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).\n\nWe highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require spatie/livewire-filepond\n```\n\nOptionally, you can publish the views using\n\n```bash\nphp artisan vendor:publish --tag=\"livewire-filepond-views\"\n```\n\n## Usage\n\nFirst, add the scripts to your layout or view where you want to use Filepond:\n\n```bladehtml\n@filepondScripts\n```\n\nNext, add the `WithFilePond` trait to your component:\n\n```php\nuse Livewire\\Component;\nuse Spatie\\LivewireFilepond\\WithFilePond;\n\nclass MyLivewireComponent extends Component\n{\n    use WithFilePond;\n    \n    public $file;\n}\n```\n\nFinally, add the component to your view:\n\n```bladehtml\n\u003cx-filepond::upload wire:model=\"file\" /\u003e\n```\n\n### Customizing the component\n\nOptionally, you can use these component properties to customize the component:\n\n- `multiple`: Allow multiple files to be uploaded. Default: `false`.\n- `required`: Make the file input required. Default: `false`.\n- `disabled`: Disable the file input. Default: `false`.\n- `max-files`: Sets the maximum number of files that can be uploaded. Default: `null`.\n- `placeholder`: Placeholder text for the file input. Default: `Drag \u0026 Drop your files or \u003cspan class=\"filepond--label-action\"\u003e Browse \u003c/span\u003e`.\n- `maxfilesmsg`: Error message shown when the maximum number of uploads is reached. Default: `You can upload a maximum of :max files.`.\n\nAdditionally, you can also pass [any property that the Filepond component accepts](https://pqina.nl/filepond/docs/api/instance/properties/) and [plugins properties](https://pqina.nl/filepond/docs/api/plugins/). Make sure to use kebab case the property. For example, to set the maximum number of files to 5, you can do this:\n\n```bladehtml\n\u003cx-filepond::upload wire:model=\"file\" max-files=\"5\" /\u003e\n```\n\nIf you pass the `max-files` property, ensure your Livewire component includes a public method to show the validation message when the file limit is reached.\n\n```php\npublic function setMaxFilesError(string $message): void\n{\n    $this-\u003eaddError('file', $message);\n}\n```\n\nLocalization automatically works based on the current locale. If you want to customize the language, you can publish the language file using:\n\n```bash\nphp artisan vendor:publish --tag=\"livewire-filepond-translations\"\n```\n\nIf you want to change your locale you can do so by change the `.env` file:\n\n```env\nAPP_LOCALE=id # change to Indonesian for example\n```\n\nor by setting the locale using laravel's `App` facade: \n\n```php\nuse Illuminate\\Support\\Facades\\App;\n\nApp::setLocale('id'); // change to Indonesian for example\n```\nThe last method can be used to change the locale on the fly. Like when a user changes the language (You need to implement this yourself).\n\n## Events\n\nOptionally, you can use these Alpine.js events when needed:\n\n- `filepond-upload-started`: Started file upload.\n- `filepond-upload-finished`: Finished file upload.\n- `filepond-upload-reverted`: File upload reverted by user.\n- `filepond-upload-file-removed`: File removed from list by user.\n- `filepond-upload-completed`: All files in the list have been processed and uploaded.\n\n## Server Side Validation on upload\n\nOptionally, you can validate the uploaded file immediately. This is useful to inform the user of an error and process file uploads without requiring the user to click a button.\n\n```php\nuse Livewire\\Component;\nuse Spatie\\LivewireFilepond\\WithFilePond;\n\nclass MyLivewireComponent extends Component\n{\n    use WithFilePond;\n    \n    public $file;\n\n    public function rules(): array\n    {\n        return [\n            'file' =\u003e 'required|mimetypes:image/jpg,image/jpeg,image/png|max:3000',\n        ];\n    }\n    public function validateUploadedFile()\n    {\n        $this-\u003evalidate();\n\n        return true;\n    }\n}\n```\n\n## Publishing assets\n\nLivewire Filepond automatically loads the scripts through an endpoint. If you want to serve the assets directly, you can publish them:\n\n```shell\nphp artisan vendor:publish --tag=livewire-filepond-assets --force\n```\n\nTo keep the assets up to that at all times, you can add the command above to your Composer's `post-update-cmd` scripts.\n\n## Testing\n\n```bash\ncomposer test\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [Rias Van der Veken](https://github.com/riasvdv)\n- [All Contributors](../../contributors)\n- [Ewilan Rivière](https://ewilan-riviere.com/articles/laravel-filepond-livewire)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Flivewire-filepond","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspatie%2Flivewire-filepond","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Flivewire-filepond/lists"}