Components

File Upload

A drag-and-drop dropzone with image thumbnails, file sizes and per-file progress bars.

php artisan blatui:add file-upload

Drag & drop files here, or click to browse

Up to 10MB

<div class="w-full max-w-md">
    <x-ui.file-upload name="document" maxSizeLabel="Up to 10MB" />
</div>

Image Preview

Drag & drop files here, or click to browse

image/* · PNG, JPG or GIF

<div class="w-full max-w-md">
    <x-ui.file-upload name="photos" multiple accept="image/*" maxSizeLabel="PNG, JPG or GIF" />
</div>

Multiple

Drag & drop files here, or click to browse

.pdf,.doc,.docx,.txt · Max 5 files

<div class="w-full max-w-md">
    <x-ui.file-upload name="attachments" multiple accept=".pdf,.doc,.docx,.txt" maxSizeLabel="Max 5 files" />
</div>

With Progress

<form class="w-full max-w-md" action="#" method="post" enctype="multipart/form-data">
    <x-ui.file-upload name="uploads" multiple maxSizeLabel="Each file uploads with a live progress bar" />
</form>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php

use Livewire\Component;

class Demo extends Component
{
    public $avatar;

    public function render()
    {
        return view('livewire.demo');
    }
}

resources/views/livewire/demo.blade.php

<x-ui.file-upload wire:model="avatar" accept="image/*" />

Add the Livewire\WithFileUploads trait to the component for temporary uploads.

API Reference

Props, slots and exposed methods for <x-ui.file-upload>.

Props

Prop	Type	Default	Description
`name`	`string`	—	The name attribute of the hidden file input, so selected files submit with a form. With multiple, "[]" is appended.
`multiple`	`bool`	`false`	Allow selecting more than one file.
`accept`	`string`	—	The native accept filter (e.g. "image/*,.pdf"). Also shown in the dropzone hint line.
`maxSizeLabel`	`string`	—	A human-readable size hint (e.g. "Up to 10MB") shown in the dropzone. Display only — not enforced.
`disabled`	`bool`	`false`	Disable the dropzone and the underlying input so no files can be added.
`id`	`string`	—	Id for the hidden file input. A random id is generated when omitted.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`open()`	Open the native file picker (the same action as clicking the dropzone).
`remove(index)`	Remove the file at the given index from the list and revoke its preview URL.