Logo Beartropy UI
File Dropzone
The x-bt-file-dropzone component provides a modern drag & drop file upload area.
It supports drag & drop, click-to-select, multiple files, image previews, and full Livewire upload integration.
Use it with validation, custom icons, and MIME type filters for safe & friendly uploads.

Basic Usage

A simple single-file dropzone for image uploads.
Users can drag & drop files or click the area to open the file picker. 

1<x-bt-file-dropzone
2    name="avatar"
3    label="Profile picture"
4    :multiple="false"
5    accept="image/*"
6/>

Multiple Files

Enable multiple to allow selecting or dropping more than one file.
Selected filenames are listed and can be cleared or removed individually. 

1<x-bt-file-dropzone
2    name="attachments"
3    label="Attach files"
4    multiple
5/>

Livewire Integration

When used with wire:model, the component integrates with Livewire's upload system.
Upload progress is automatically tracked via Livewire events and shown in a progress bar. 

1<x-bt-file-dropzone
2    label="Upload photos"
3    wire:model="photos"
4    multiple
5    preview
6    accept="image/*"
7/>

Restrict File Types

Use the accept attribute to restrict allowed file types.
You can disable previews for non-image content by setting :preview="false". 

1<x-bt-file-dropzone
2    name="documents"
3    label="Upload documents"
4    :preview="false"
5    accept=".pdf,.doc,.docx,.xls,.xlsx"
6/>

Props

Prop Type Default Description
id
string auto-generated
Optional ID for the underlying file input. If omitted, a unique ID like beartropy-filedropzone-xxxxx is automatically generated.
name
string null
Base name for the file input.
When multiple is enabled, the real input name becomes name[] so the uploaded files are received as an array.
label
string|null null
Text label displayed above the dropzone area.
icon
string|null null
Optional icon name to be rendered via <x-beartropy-ui::icon /> inside the dropzone. If not provided, the default upload illustration is used.
preview
bool true
Controls whether image previews are rendered for selected files.
When true, any file with a MIME type starting with image/ is displayed as a thumbnail.
multiple
bool true
Allows selecting or dropping multiple files. When false, only a single file can be chosen and any new selection replaces the previous one.
accept
string|null null
Standard HTML accept attribute to restrict file types.
Example: accept="image/*" or accept=".pdf,.doc,.docx".
clearable
bool true
When enabled, shows a "Clear all" action below the dropzone and a small remove button for each preview entry.
disabled
bool false
Disables the dropzone, preventing both drag & drop and click-to-select actions.
color
string|null null
Optional color preset key to customize the dropzone appearance using the file-dropzone preset configuration.
customError
string|null null
Custom error message to force an error state independently of validation errors. Rendered via the field-help support component.
wire:model
Livewire binding null
Livewire binding for the uploaded files collection.
Use wire:model, wire:model.defer or similar for full Livewire upload support and progress tracking.
Code highlighting provided by Torchlight