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:
<x-filepond::upload wire:model="file" />
Here's how it looks like in action in mailcoach.app (a product we built at Spatie):
We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.
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. We publish all received postcards on our virtual postcard wall.
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"
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:
<x-filepond::upload wire:model="file" />
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
.placeholder
: Placeholder text for the file input. Default:Drag & Drop your files or <span class="filepond--label-action"> Browse </span>
.
Additionally, you can also pass any property that the Filepond component accepts. Make sure to use kebab case the property. For example, to set the maximum number of files to 5, you can do this:
<x-filepond::upload wire:model="file" max-files="5" />
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.
composer test
Please see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.