How to Use Livewire Dropzone

Published on by Dasun Tharanga

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

To install the styles package, use the following command:

1npm i @dasundev/livewire-dropzone-styles

Import styles to your project

1/* resources/css/app.css */
2 
3@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}
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>

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

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! 😇