Livewire File Uploads mit Filepond: Ein moderner Ansatz
File Uploads sind ein essentieller Bestandteil vieler Webanwendungen. Doch die Implementierung eines benutzerfreundlichen Upload-Systems kann oft eine Herausforderung sein. In diesem Artikel stelle ich dir das Spatie Livewire Filepond Package vor, das diese Herausforderung elegant löst.
Was ist Filepond?
Filepond ist eine leistungsstarke JavaScript-Bibliothek für File Uploads, die sich durch ihre benutzerfreundliche Oberfläche und umfangreiche Funktionalität auszeichnet. Das Spatie Livewire Filepond Package macht diese Bibliothek nun für Laravel und Livewire verfügbar.
Installation und Setup
Beginnen wir mit der Installation des Packages:
composer require spatie/livewire-filepond
Füge die Filepond-Skripte zu deinem Layout hinzu. Dafür musst du in deiner Layout-Datei (z.B. app.blade.php) den Script-Tag im <head> Bereich einfügen:
<head>
<!-- Andere Meta-Tags und Styles -->
@filepondScripts
</head>Grundlegende Implementierung
Erstelle eine neue Livewire-Komponente mit:
php artisan make:livewire FileUpload
In deiner neuen Komponente fügst du das WithFilePond Trait hinzu:
use Livewire\Component;
use Spatie\LivewireFilepond\WithFilePond;
class FileUpload extends Component
{
use WithFilePond;
public $file;
}In der zugehörigen Blade-View kannst du nun den Upload-Component verwenden:
<div>
<x-filepond::upload wire:model="file" />
</div>Anpassungsmöglichkeiten
Das Package bietet zahlreiche Anpassungsmöglichkeiten. Hier ein Beispiel mit den wichtigsten Optionen:
<x-filepond::upload
wire:model="file"
multiple
max-files="5"
accepted-file-types="image/jpeg,image/png"
max-file-size="2MB"
label-idle="Ziehe deine Dateien hierher oder <span class='filepond--label-action'>durchsuche</span>"
/>Fortgeschrittene Features
Das Package unterstützt auch fortgeschrittene Features wie:
- Drag & Drop
- Bildvorschau
- Fortschrittsanzeige
- Mehrsprachigkeit
- Anpassbare Styling-Optionen
Fazit
Das Spatie Livewire Filepond Package bietet eine elegante Lösung für File Uploads in Laravel-Anwendungen. Es kombiniert die Benutzerfreundlichkeit von Filepond mit der Einfachheit von Livewire und bietet dabei zahlreiche Anpassungsmöglichkeiten.
