Weave Code
Code Weaver
Helps Laravel developers discover, compare, and choose open-source packages. See popularity, security, maintainers, and scores at a glance to make better decisions.
Feedback
Share your thoughts, report bugs, or suggest improvements.
Subject
Message
Livewire Dropzone

Livewire Dropzone Laravel Package

dasundev/livewire-dropzone

Livewire Dropzone adds an easy drag-and-drop upload area to Laravel Livewire apps. Supports simple file selection and drop uploads with a reusable component, helping you build modern upload UX quickly with minimal setup.

View on GitHub
Deep Wiki
Context7

A Livewire Dropzone component for simple drag-and-drop file uploads.

Frequently asked questions about Livewire Dropzone
How do I install Livewire Dropzone in a Laravel 10 project?
Run `composer require dasundev/livewire-dropzone` and add the Livewire component to your Blade view with `<livewire:your-component />`. Ensure Livewire 3.x or 4.x is installed. No additional npm steps are required unless using custom themes.
Does Livewire Dropzone work with Laravel’s S3 or other cloud storage?
Yes, it leverages Laravel’s filesystem configuration (e.g., `config/filesystems.php`). Configure your storage disk (e.g., S3) as usual, and the package will handle uploads via Laravel’s default storage logic.
Can I customize the dropzone appearance or add a custom theme?
Basic styling is supported via props like `class`, but premium themes require a paid contribution. For now, use CSS or Alpine.js to tweak the default Alpine.js-powered UI. Check the [theme form](https://forms.gle/bact2NhZkDUXu9Hk6) for updates.
What Laravel and Livewire versions does Livewire Dropzone support?
The package is optimized for **Laravel 10+** and **Livewire 3.x/4.x**. Version **2.0.8+** explicitly targets Livewire 4.0, so test thoroughly if using Livewire 3.x. Check the [changelog](https://github.com/dasundev/livewire-dropzone/blob/main/CHANGELOG.md) for version-specific notes.
How do I handle file validation (e.g., size, MIME types) with this package?
Livewire Dropzone emits `updatedUploadedFiles` events—use Livewire’s `validate()` method in your component to enforce rules. Example: `public function updatedUploadedFiles() { $this->validate(['uploadedFiles.*' => 'mimes:jpg,png|max:2048']); }`
Will this work with multiple dropzones on a single page?
Yes, but ensure each dropzone has a unique `wire:key` or `id` to avoid conflicts. Version **1.0.9+** fixed concurrency issues, but test with your target Livewire version to confirm stability.
Are there built-in features for chunked uploads or resumable transfers?
No, the package does not support chunked uploads or resumable transfers out of the box. For large files, implement client-side chunking with JavaScript (e.g., using Axios) or server-side logic in your Livewire component.
How do I process uploaded files (e.g., store in database) after the dropzone event?
Override the `updatedUploadedFiles` method in your Livewire component. Loop through `$this->uploadedFiles` to process each file (e.g., store paths in a database or move files to disk using Laravel’s `Storage` facade).
What happens if an upload fails? Can I show error messages to users?
The package emits `uploaded`, `error`, and `removed` events. Listen for these in your Livewire component and use `$this->dispatchBrowserEvent()` to show toast notifications or update UI. Example: `$this->dispatchBrowserEvent('alert', ['type' => 'error', 'message' => 'Upload failed!']);`
Is there an alternative if I’m not using Livewire (e.g., Inertia.js or vanilla Blade)?
Yes, consider **Dropzone.js** (standalone) or **Laravel Filepond** for Blade/Inertia apps. For Livewire, this package is the most integrated solution, but alternatives like **Livewire Dropzone** (this package) require Livewire’s reactivity model.
Weaver

How can I help you explore Laravel packages today?

Conversation history is not saved when not logged in.
Prompt
Add packages to context
No packages found.
graham-campbell/flysystem
capell-app/block-library
axium/identity
cetria/laravel-dummy-models
cetria/reflection-helper
agropredict/sso-auth-bundle
evolvestudio/spam-protection
directorytree/opensearch-client
directorytree/opensearch-adapter
datacore/hub-sdk
develia/commons
cuci/prototurk-sdk
cuci/prototurk-sdk-symfony
develia/geo-bundle
dreamzy/livewire-charts
touchestate-sdk/php-sdk
22h/doctrine-garbage-collection-bundle
agtp/agtp-php
agtp/mod-php
splash/sonata-admin