✨ Introduction

This dropzone component for Livewire enables easy drag-and-drop file uploads.

Important

To use this package, you must have Livewire 3 installed.

📦 Installation

You can install the package via Composer:

composer require dasundev/livewire-dropzone

To install the styles package, use the following command:

npm i @dasundev/livewire-dropzone-styles

Import styles to your project

/* resources/css/app.css */

@import "@dasundev/livewire-dropzone-styles";

🎬 Showcase

Now you can use the dropzone component as you like.

<livewire:dropzone
        wire:model="banners"
        :rules="['image','mimes:png,jpeg','max:10420']"
        :multiple="true" />

Important

If you're using more than one dropzone component on the same page, make sure to include wire:key in the opening tag like this:

<!-- Dropzone 1 -->
<livewire:dropzone
        wire:model="thumbnail"
        :rules="['image','mimes:png,jpeg','max:10420']"
        :key="'dropzone-one'" />

<!-- Dropzone 2 -->
<livewire:dropzone
        wire:model="files"
        :rules="['mimes:pdf,pptx,zip']"
        :multiple="true"
        :key="'dropzone-two'" />

🎨 Tailor UI

The dropzone component is entirely customizable. Just publish the view file and make it your own.

php artisan vendor:publish --tag=livewire-dropzone-views

📌 Special Note

The Livewire dropzone component uploads files to Livewire's temporary upload directory. To permanently store them, manual action is required. This is where wire:model becomes essential. For example, take the banners model, which contains each upload as an array containing file paths. You can iterate through this array and store the files according to your preferences.

📝 Blog Post

I made a blog post about using the Livewire dropzone to store files permanently. It's perfect for people new to Laravel. You can read the blog post here.

🔄 Changelog

Please see CHANGELOG for more information on what has changed recently.

🤝 Contributing

Please see CONTRIBUTING for details.