How to Use Livewire Dropzone

Livewire Dropzone

The Livewire Dropzone component makes uploading files much easier. It lets you upload many files at once and checks if they're okay based on your rules in Laravel. Plus, you can customize it however you want.

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

So, let's get started.✌️

📦 Installation

You can install the package via Composer:

1composer require dasundev/livewire-dropzone

composer require dasundev/livewire-dropzone

To install the styles package, use the following command:

1npm i @dasundev/livewire-dropzone-styles

npm i @dasundev/livewire-dropzone-styles

Import styles to your project

1/* resources/css/app.css */
2 
3@import "@dasundev/livewire-dropzone-styles";

/* resources/css/app.css */

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

👩‍💻 Usage

After you set it up, we can use our dropzone wherever we need it.

For example, imagine we're creating a product using a Livewire component, and we need to upload photos for it.

 1<?php
 2 
 3// app/Livewire/CreateProduct.php
 4 
 5namespace App\Livewire;
 6 
 7use Illuminate\Http\File;
 8use Illuminate\Support\Facades\Storage;
 9use Livewire\Component;
10 
11class CreateProduct extends Component
12{
13 
14    public array $photos = [];
15 
16    public function submit(): void
17    {
18        foreach ($this->photos as $photo) {
19            Storage::putFile('photos', new File($photo['path']));
20        }
21    }
22 
23}

<?php

// app/Livewire/CreateProduct.php

namespace App\Livewire;

use Illuminate\Http\File;
use Illuminate\Support\Facades\Storage;
use Livewire\Component;

class CreateProduct extends Component
{

    public array $photos = [];

    public function submit(): void
    {
        foreach ($this->photos as $photo) {
            Storage::putFile('photos', new File($photo['path']));
        }
    }

}

 1<!-- resources/views/livewire/create-product.blade.php -->
 2 
 3<div>
 4    <form wire:submit="submit"> 
 5        <livewire:dropzone
 6            wire:model="photos"
 7            :rules="['image','mimes:png,jpeg','max:10420']"
 8            :multiple="true" />
 9        <button type="submit">Submit</button>
10    </form> 
11</div>

<!-- resources/views/livewire/create-product.blade.php -->

<div>
    <form wire:submit="submit">
        <livewire:dropzone
            wire:model="photos"
            :rules="['image','mimes:png,jpeg','max:10420']"
            :multiple="true" />
        <button type="submit">Submit</button>
    </form>
</div>

🎨 Tailor UI

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

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

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

That's all for now! Hope you enjoy using the dasundev/livewire-dropzone package. If you need anything else, feel free to ask in the comment section!

Make sure to show your support by giving a star to the GitHub repository!

Happy coding! 😇

How to Use Livewire Dropzone

📦 Installation

👩‍💻 Usage

🎨 Tailor UI

Get notified for the next blog post? Sign up for the newsletter.