Working with dropzone
<livewire:dropzone
wire:model="banners"
:rules="['image','mimes:png,jpeg','max:10420']"
:multiple="true" />
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'" />
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. If you need additional support this article may helpful.