Weave Code
Livewire Dropzone Laravel Package
laravio/livewire-dropzone
Livewire Dropzone adds drag-and-drop file uploads to Laravel Livewire forms, with previews, progress indicators, and configurable validation. Drop the component into any Blade view and handle uploads reactively through Livewire—no page reloads or custom JavaScript required.
A Livewire Dropzone component for simple drag-and-drop file uploads.
Frequently asked questions about Livewire Dropzone
- How do I install laravio/livewire-dropzone in a Laravel application?
- Install it with Composer using composer require laravio/livewire-dropzone, then place the component tag in any Blade view rendered by Livewire. Because it is a Livewire component, no separate JavaScript bundling step is normally needed. Check the README for any publishable config or view files you may want to customize.
- Does laravio/livewire-dropzone support Livewire 3 and recent Laravel versions?
- The package is built for Livewire applications, so confirm the Livewire and PHP constraints listed in its composer.json before installing. Mixing a package written for Livewire 2 into a Livewire 3 app will cause component errors, so check the version requirement first. Reviewing the release history and open issues on the repository is the quickest way to judge how actively it is maintained.
- How do I validate uploaded files with the Dropzone component?
- Validation rules are configurable, so you can enforce file types, sizes, and counts on the component from your Livewire class. Define rules in the component's rules method so errors surface inline inside the form. Server-side rules are the authoritative check; any client-side hints in the dropzone are just convenience.
- Do I need to write custom JavaScript or configure Alpine.js to use it?
- No custom JavaScript is required, because the component handles drag-and-drop events and uploads through Livewire's reactive lifecycle. It relies on the JavaScript Livewire already ships, so there is no separate Alpine.js setup or bundler change. If you want extra drag-state styling, plain CSS is usually enough.
- How do I show upload progress and file previews?
- The component renders progress indicators while files upload and previews for selected images or files. Previews for supported file types are generated before the form is submitted so users can confirm their selection. Exact preview behaviour depends on the file type and browser support.
- Can I customize the dropzone markup and styling to match my design?
- Yes, the Blade view behind the component can be published and overridden, which lets you change the wrapper markup, labels, and progress elements. Keep the Livewire bindings and event hooks intact when editing so uploads still sync with the component. Most visual tweaks can also be done by targeting the existing classes with your own CSS.
- Does it handle multiple file uploads and removing files before submitting?
- You can select and queue multiple files and remove an item before the form is submitted, keeping the Livewire property in sync. Bind the component to an array-style Livewire property so your parent form can validate and persist every file. Check the README for the exact property and event names used by the component.
- Where are uploaded files stored, and does it work with S3?
- Files are stored through Laravel's filesystem, so whichever disk you configure in config/filesystems.php, whether local, S3, or another driver, applies when the file is moved. Livewire handles the temporary upload first, then your component stores it on the chosen disk. For S3, confirm credentials and bucket permissions cover both the temporary and permanent locations.
- What should I check before using laravio/livewire-dropzone in production?
- Tune PHP's upload_max_filesize, post_max_size, and Livewire's temporary upload rules so they match the limits you advertise in the component. Livewire writes temporary files to disk before your code moves them, so plan for cleanup and storage capacity. Also keep validation server-side, since client feedback can be bypassed.
- What are the alternatives to laravio/livewire-dropzone?
- Livewire's built-in wire:model file uploads with the WithFileUploads trait cover simple cases without any extra package, and spatie/laravel-medialibrary adds heavier media handling. JavaScript libraries such as FilePond or Dropzone.js give more visual control but need extra wiring. Choose this package when you want drag-and-drop uploads inside Livewire forms with minimal setup.
Weaver
How can I help you explore Laravel packages today?