PHPackages spatie/livewire-filepond - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [File & Storage](/categories/file-storage) 4. / 5. spatie/livewire-filepond ActiveLibrary[File & Storage](/categories/file-storage) spatie/livewire-filepond ======================== Upload files using Filepond in Livewire components 1.7.1(2mo ago)306452.7k—8.2%393MITPHPPHP ^8.2CI passing Since Jul 15Pushed 2mo ago4 watchersCompare [ Source](https://github.com/spatie/livewire-filepond)[ Packagist](https://packagist.org/packages/spatie/livewire-filepond)[ Docs](https://github.com/spatie/livewire-filepond)[ GitHub Sponsors](https://github.com/Spatie)[ RSS](/packages/spatie-livewire-filepond/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (26)Versions (20)Used By (3) Upload files using Filepond in Livewire components ================================================== [](#upload-files-using-filepond-in-livewire-components) [![Latest Version on Packagist](https://camo.githubusercontent.com/6305db3ecdf9fc0b3046e860c47bafb7b585fd19973e6ddd8c8b819f0e9ffb90/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7370617469652f6c697665776972652d66696c65706f6e642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/spatie/livewire-filepond)[![GitHub Tests Action Status](https://camo.githubusercontent.com/59b29aef3b2bc292245e452e8f0d1f2f137933eeba8002ce8e0621ae037df4bf/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f7370617469652f6c697665776972652d66696c65706f6e642f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/spatie/livewire-filepond/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/0b9115037798bd2f17abe6d7b262cf60ebf981a1012bee1185499d331bd0914d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f7370617469652f6c697665776972652d66696c65706f6e642f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/spatie/livewire-filepond/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/604fa40bd1019f86a2c754c3aeeb3d7b2e91edcd887748e818552704ac0b8a02/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7370617469652f6c697665776972652d66696c65706f6e642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/spatie/livewire-filepond) [Filepond](https://pqina.nl/filepond/) is a powerful JavaScript library to upload files. This repository contains a Livewire component that allow you to use Filepond easily in your projects. Here's an example of how you can use it in your views: ``` ``` Here's how it looks like in action in [mailcoach.app](https://mailcoach.app) (a product we built at Spatie): [![screenshot](https://github.com/spatie/livewire-filepond/raw/main/docs/images/upload.png)](https://github.com/spatie/livewire-filepond/blob/main/docs/images/upload.png) Support us ---------- [](#support-us) [![](https://camo.githubusercontent.com/8636b8e71ae6220859eafbd3a9931ea94fb6126eb4ee88bbf25f036c87f8a1f0/68747470733a2f2f6769746875622d6164732e73332e65752d63656e7472616c2d312e616d617a6f6e6177732e636f6d2f6c697665776972652d66696c65706f6e642e6a70673f743d31)](https://spatie.be/github-ad-click/livewire-filepond) We 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). We 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). Installation ------------ [](#installation) You can install the package via composer: ``` composer require spatie/livewire-filepond ``` Optionally, you can publish the views using ``` php artisan vendor:publish --tag="livewire-filepond-views" ``` Usage ----- [](#usage) First, add the scripts to your layout or view where you want to use Filepond: ``` @filepondScripts ``` Next, add the `WithFilePond` trait to your component: ``` use Livewire\Component; use Spatie\LivewireFilepond\WithFilePond; class MyLivewireComponent extends Component { use WithFilePond; public $file; } ``` Finally, add the component to your view: ``` ``` ### Customizing the component [](#customizing-the-component) Optionally, you can use these component properties to customize the component: - `multiple`: Allow multiple files to be uploaded. Default: `false`. - `required`: Make the file input required. Default: `false`. - `disabled`: Disable the file input. Default: `false`. - `max-files`: Sets the maximum number of files that can be uploaded. Default: `null`. - `placeholder`: Placeholder text for the file input. Default: `Drag & Drop your files or Browse `. - `maxfilesmsg`: Error message shown when the maximum number of uploads is reached. Default: `You can upload a maximum of :max files.`. Additionally, 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: ``` ``` If 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. ``` public function setMaxFilesError(string $message): void { $this->addError('file', $message); } ``` Localization automatically works based on the current locale. If you want to customize the language, you can publish the language file using: ``` php artisan vendor:publish --tag="livewire-filepond-translations" ``` If you want to change your locale you can do so by change the `.env` file: ``` APP_LOCALE=id # change to Indonesian for example ``` or by setting the locale using laravel's `App` facade: ``` use Illuminate\Support\Facades\App; App::setLocale('id'); // change to Indonesian for example ``` The 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). Events ------ [](#events) Optionally, you can use these Alpine.js events when needed: - `filepond-upload-started`: Started file upload. - `filepond-upload-finished`: Finished file upload. - `filepond-upload-reverted`: File upload reverted by user. - `filepond-upload-file-removed`: File removed from list by user. - `filepond-upload-completed`: All files in the list have been processed and uploaded. Server Side Validation on upload -------------------------------- [](#server-side-validation-on-upload) Optionally, 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. ``` use Livewire\Component; use Spatie\LivewireFilepond\WithFilePond; class MyLivewireComponent extends Component { use WithFilePond; public $file; public function rules(): array { return [ 'file' => 'required|mimetypes:image/jpg,image/jpeg,image/png|max:3000', ]; } public function validateUploadedFile() { $this->validate(); return true; } } ``` Publishing assets ----------------- [](#publishing-assets) Livewire Filepond automatically loads the scripts through an endpoint. If you want to serve the assets directly, you can publish them: ``` php artisan vendor:publish --tag=livewire-filepond-assets --force ``` To keep the assets up to that at all times, you can add the command above to your Composer's `post-update-cmd` scripts. Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Rias Van der Veken](https://github.com/riasvdv) - [All Contributors](../../contributors) - [Ewilan Rivière](https://ewilan-riviere.com/articles/laravel-filepond-livewire) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 61 — FairBetter than 99% of packages Maintenance84 Actively maintained with recent releases Popularity57 Moderate usage in the ecosystem Community32 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~37 days Recently: every ~19 days Total 17 Last Release 81d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/7535935?v=4)[Spatie](/maintainers/spatie)[@spatie](https://github.com/spatie) ![](https://www.gravatar.com/avatar/dbd355ba9a931da845b0c4ff59a974dab98f829d567bb8c5ff435c823dfa255e?d=identicon)[riasvdv](/maintainers/riasvdv) --- Top Contributors [![freekmurze](https://avatars.githubusercontent.com/u/483853?v=4)](https://github.com/freekmurze "freekmurze (45 commits)")[![riasvdv](https://avatars.githubusercontent.com/u/3626559?v=4)](https://github.com/riasvdv "riasvdv (27 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (4 commits)")[![KhairulAzmi21](https://avatars.githubusercontent.com/u/12378983?v=4)](https://github.com/KhairulAzmi21 "KhairulAzmi21 (2 commits)")[![trippo](https://avatars.githubusercontent.com/u/497169?v=4)](https://github.com/trippo "trippo (2 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (2 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (2 commits)")[![dragonfly4](https://avatars.githubusercontent.com/u/221351?v=4)](https://github.com/dragonfly4 "dragonfly4 (2 commits)")[![AlexVanderbist](https://avatars.githubusercontent.com/u/6287961?v=4)](https://github.com/AlexVanderbist "AlexVanderbist (2 commits)")[![stockhausen](https://avatars.githubusercontent.com/u/263501?v=4)](https://github.com/stockhausen "stockhausen (1 commits)")[![uluumbch](https://avatars.githubusercontent.com/u/49960993?v=4)](https://github.com/uluumbch "uluumbch (1 commits)")[![abdelhamiderrahmouni](https://avatars.githubusercontent.com/u/26693672?v=4)](https://github.com/abdelhamiderrahmouni "abdelhamiderrahmouni (1 commits)")[![yungifez](https://avatars.githubusercontent.com/u/63137056?v=4)](https://github.com/yungifez "yungifez (1 commits)")[![Alessandro-DG](https://avatars.githubusercontent.com/u/173343647?v=4)](https://github.com/Alessandro-DG "Alessandro-DG (1 commits)")[![arifbudimanar](https://avatars.githubusercontent.com/u/147667935?v=4)](https://github.com/arifbudimanar "arifbudimanar (1 commits)")[![diat01](https://avatars.githubusercontent.com/u/29593600?v=4)](https://github.com/diat01 "diat01 (1 commits)")[![laxmax85](https://avatars.githubusercontent.com/u/106859138?v=4)](https://github.com/laxmax85 "laxmax85 (1 commits)")[![Nevercom](https://avatars.githubusercontent.com/u/2162552?v=4)](https://github.com/Nevercom "Nevercom (1 commits)")[![robkobylinski](https://avatars.githubusercontent.com/u/238509700?v=4)](https://github.com/robkobylinski "robkobylinski (1 commits)")[![RoccoHoward](https://avatars.githubusercontent.com/u/227896?v=4)](https://github.com/RoccoHoward "RoccoHoward (1 commits)") --- Tags filepondlaravellivewirephpuploadsspatielaravellivewireuploadslivewire-filepond ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/spatie-livewire-filepond/health.svg) ``` [![Health](https://phpackages.com/badges/spatie-livewire-filepond/health.svg)](https://phpackages.com/packages/spatie-livewire-filepond) ``` ### Alternatives [spatie/laravel-livewire-wizard Build wizards using Livewire 4061.0M4](/packages/spatie-laravel-livewire-wizard)[spatie/laravel-google-cloud-storage Google Cloud Storage filesystem driver for Laravel 2408.9M13](/packages/spatie-laravel-google-cloud-storage)[spatie/laravel-prometheus Export Laravel metrics to Prometheus 2651.3M6](/packages/spatie-laravel-prometheus)[elegantly/laravel-invoices Store invoices safely in your Laravel application 23131.8k](/packages/elegantly-laravel-invoices)[vormkracht10/laravel-mails Laravel Mails can collect everything you might want to track about the mails that has been sent by your Laravel app. 24149.7k](/packages/vormkracht10-laravel-mails)[mwguerra/filemanager A full-featured file manager package for Laravel and Filament v5 with dual operating modes, drag-and-drop uploads, S3/MinIO support, and comprehensive security features. 718.5k1](/packages/mwguerra-filemanager) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)