title: Working with dropzone weight: 1

Working with dropzone

<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'" />

[!CAUTION] 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.