Adds file upload capability to Livewire form components. Handles temporary storage, validation, and persisting uploads.
File uploads use FilePond, a JavaScript library that provides drag-and-drop, previews, and progress indicators. It integrates with Livewire's temporary upload system.
Activate this skill when:
Add WithFileUploads trait to component:
use Livewire\WithFileUploads;
class CreateEdit extends Component
{
use WithFormActions, WithFileUploads;
}
Use on component, not form object.
Add filepond to view:
<!-- nathan to change this --> <!-- i think this is one i will review later. --><x-gt-filepond wire:model="form.tmpUpload" />
Configure in form object:
public array $storage = [
'disk' => 'media',
'dbColumn' => 'image_name',
'path' => 'uploads/images',
];
public function featuredImageUrl()
{
return $this->image_name
? Storage::disk('media')->url($this->image_name)
: url('/svg/placeholder.svg');
}
View:
<img src="{{ $this->imageUrl() }}" alt="{{ $form->title }}">
Component method:
public function imageUrl()
{
return $this->form->tmpUpload?->temporaryUrl()
?? $this->form->editing?->featuredImageUrl()
?? url('/svg/placeholder.svg');
}