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>