Livewire File Upload

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:

•Forms need image/file upload fields

Setup

Add WithFileUploads trait to component:

php

use Livewire\WithFileUploads;

class CreateEdit extends Component
{
    use WithFormActions, WithFileUploads;
}

Use on component, not form object.

Add filepond to view:

blade

<x-gt-filepond wire:model="form.tmpUpload" />

Storage Configuration

Configure in form object:

php

public array $storage = [
    'disk' => 'media',
    'dbColumn' => 'image_name',
    'path' => 'uploads/images',
];

Image Preview

php

public function featuredImageUrl()
{
    return $this->image_name
        ? Storage::disk('media')->url($this->image_name)
        : url('/svg/placeholder.svg');
}

View:

blade

<img src="{{ $this->imageUrl() }}" alt="{{ $form->title }}">

Component method:

php

public function imageUrl()
{
    return $this->form->tmpUpload?->temporaryUrl()
        ?? $this->form->editing?->featuredImageUrl()
        ?? url('/svg/placeholder.svg');
}