The Changelog

What's new around here?

Succinct and informative updates about Flux.
September 30, 2025

File upload

Version ^2.5.0
File upload component with drag and drop
Flux now ships with a complete File Upload component built for modern file handling. Drag and drop, progress tracking, file previews—it all works beautifully right out of the box.
Copy to clipboard
<flux:file-upload wire:model="photos" multiple>    <flux:file-upload.dropzone        heading="Drop files here or click to browse"        text="JPG, PNG, GIF up to 10MB"    /></flux:file-upload>

Drag and drop

File upload dropzone with files being dragged over
The file upload component handles drag and drop automatically. Users can drag files directly from their desktop, or click to browse—whatever they prefer. The component automatically provides visual feedback when files are dragged over using data attributes you can style with Tailwind's in-data-dragging: prefix.

Compact inline layout

File upload dropzone with a more compact layout
For tighter spaces, add the inline prop to the dropzone for a horizontal layout that takes up less vertical room:
Copy to clipboard
<flux:file-upload.dropzone    heading="Drop files or click to browse"    text="JPG, PNG, GIF up to 10MB"    inline/>

Built-in progress tracking

File upload with progress bar showing upload status
Add the with-progress prop and the component shows real-time upload progress. No extra JavaScript needed—it's all handled for you.
Copy to clipboard
<flux:file-upload.dropzone    heading="Drop files or click to browse"    text="JPG, PNG, GIF up to 10MB"    with-progress/>
The component exposes CSS variables (--flux-file-upload-progress and --flux-file-upload-progress-as-string) so you can create custom progress indicators if you need them.

Completely customizable

Custom avatar uploader with circular design
The flux:file-upload wrapper handles all the complex functionality—drag and drop, file selection, upload progress—while letting you use any custom HTML you want for the appearance. This is perfect for things like custom avatar uploaders or specialized file inputs.
Copy to clipboard
<flux:file-upload wire:model="photo">    <!-- Your custom UI here -->    <div class="...">        <flux:icon name="user" />    </div></flux:file-upload>
The component provides data-dragging and data-loading attributes that you can target with Tailwind's utility prefixes for dynamic visual feedback.

Display uploaded files

The flux:file-item component displays uploaded files with automatic image previews, formatted file sizes, and action buttons. It handles all the details—file name display, size formatting (KB, MB, GB), and thumbnail generation.
Copy to clipboard
@foreach ($photos as $index => $photo)    <flux:file-item        :heading="$photo->getClientOriginalName()"        :image="$photo->temporaryUrl()"        :size="$photo->getSize()"    >        <x-slot name="actions">            <flux:file-item.remove wire:click="removePhoto({{ $index }})" />        </x-slot>    </flux:file-item>@endforeach

Seamless Livewire integration

Works perfectly with Livewire's file upload system. Just add wire:model and you're done—single files, multiple files, validation, temporary URLs, it all just works.
The documentation includes complete examples for both single and multiple file uploads with full Livewire component code.

Works as a native file input

The file upload component dispatches all the same events and has all the same properties as a native <input type="file"> element. This means you can likely use it with your favorite third-party library.

Accessibility built in

We made sure the file upload component works great on both mobile devices and screen readers. All interactive elements have proper ARIA labels, keyboard navigation works exactly as you'd expect, and focus management is handled automatically.

Check out the File Upload documentation for complete examples and API reference.
Copyright © 2025 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie