Logo Beartropy

File Dropzone

The x-file-dropzone component is a modern, flexible drag & drop uploader for your app.
Supports multiple files, image preview, clearable, accept filters, custom icons, and seamless Livewire integration with progress bar.
The ideal choice for powerful UX in any project!

Basic (Drag & Drop)

Just add <x-file-dropzone name="archivos" /> for a ready-to-use uploader with drag & drop.
blade 
            
1<x-file-dropzone name="archivos" label="Subí tus archivos" />

With Image Preview

Enable image previews by adding preview.
blade 
            
1<x-file-dropzone name="fotos" label="Fotos" preview accept="image/*" />

Multiple Files, Clearable

Let users clear selected files by adding clearable.
blade 
            
1<x-file-dropzone name="docs" label="Documentos" multiple clearable />

Livewire Integration + Progress Bar

Integrates natively with Livewire for file uploads and shows upload progress automatically.
blade 
            
1<x-file-dropzone name="evidencia" label="Evidencia" wire:model="evidencia" preview clearable />

Props

Available Props

  • name: input name (required)
  • label: input label (optional)
  • icon: custom icon (string, optional, defaults to upload)
  • preview: show image previews (bool, optional)
  • multiple: allow multiple files (bool, defaults to true)
  • accept: accepted file types (string, e.g. image/*, application/pdf)
  • clearable: allow clearing all files (bool, optional)
  • disabled: disables input (bool, optional)
  • color: color preset (string, optional, defaults to beartropy)
  • error: show error message (string, optional)

Livewire Integration

Native Livewire Support

Simply add wire:model="..." for native Livewire file upload support.
The progress bar is shown automatically during upload.
You can still use preview and clearable!
Code highlighting provided by Torchlight