# Livewire File Uploads

> Adds file upload capability to Livewire form components. Handles temporary storage, validation, and persisting uploads.

- Skill: `naykel76/livewire-file-uploads` (Agent Skill)
- Install (CLI): `npx skillmds@latest add naykel76/livewire-file-uploads`
- Raw SKILL.md: https://api.skillmd.com/api/skills/naykel76/livewire-file-uploads/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: naykel76 (https://skillmd.com/u/naykel76)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/naykel76/livewire-file-uploads

---


<!-- to make this a little less magical should i make a note to mention that -->
<!-- needs WithFormActions which has all the mthods and properties required-->

# 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:

<!-- nathan to change this -->
```php
public array $storage = [
    'disk' => 'media',
    'dbColumn' => 'image_name',
    'path' => 'uploads/images',
];
```

<!-- i think this is one i will review later. -->
## 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');
}
```