Demo: FilePond

The FilePond component provides an easy way to utilize advanced file uploads via FilePond.

Basic Usage

No files are uploaded to the server in this demo.

<x-file-pond />

Livewire Integration

This FilePond instance will allow a single upload of any file under 1 mb. We'll delete any files that are older than 10 minutes.

Livewire Component Class:



namespace App\Http\Livewire;

use Illuminate\Validation\ValidationException;
use Livewire\Component;
use Livewire\WithFileUploads;

final class FilePondUpload extends Component
    use WithFileUploads;

    /** @var null|\Livewire\TemporaryUploadedFile */
    public $upload;

    public function getUploadHasPreviewProperty(): bool
        if (! $this->upload) {
            return false;

        $supportedPreviewTypes = config('livewire.temporary_file_upload.preview_mimes');

        return in_array($this->upload->guessExtension(), $supportedPreviewTypes, true);

    public function updatedUpload($value): void

        if (is_null($value)) {

        try {
            $this->validateOnly('upload', [
                'upload' => ['required', 'max:1024'],
        } catch (ValidationException $e) {
            $this->upload = null;
            $this->dispatchBrowserEvent('file-pond-clear', ['id' => $this->id]);

            throw $e;

Livewire Component Markup:

    <x-file-pond wire:model="upload" description="Any file under 1 mb" />

    <x-form-error name="upload" />

    @if ($upload)
        <div id="filepond-uploaded-file" class="mt-4">
            <p class="text-sm text-blue-gray-600">Chosen File: {{ $upload->getClientOriginalName() }}</p>

            @if ($this->uploadHasPreview)
                <span class="block h-20 w-20 mt-4">
                    <img class="rounded-full w-full"
                         src="{{ $upload->temporaryUrl() }}"
                         alt="filepond preview"