preview of dropzone is made parametric

This commit is contained in:
Sevan Nerse 2021-01-17 17:58:34 +03:00
parent ec1053bb00
commit a0dcfa90b5
2 changed files with 11 additions and 4 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="dropzone mb-3 dz-clickable" <div class="dropzone mb-3 dz-clickable"
:class="[multiple ? 'dropzone-multiple': 'dropzone-single']"> :class="[isPreviewSingle ? 'dropzone-single': 'dropzone-multiple']">
<div class="fallback"> <div class="fallback">
<div class="custom-file"> <div class="custom-file">
<input type="file" <input type="file"
@ -11,7 +11,7 @@
</div> </div>
</div> </div>
<div class="dz-preview dz-preview-single" <div class="dz-preview dz-preview-single"
v-if="!multiple" v-if="isPreviewSingle"
:class="previewClasses" :class="previewClasses"
ref="previewSingle"> ref="previewSingle">
<div class="dz-preview-cover"> <div class="dz-preview-cover">
@ -57,7 +57,11 @@
default: 'http://' default: 'http://'
}, },
multiple: Boolean, multiple: Boolean,
previewClasses: [String, Object, Array] previewClasses: [String, Object, Array],
isPreviewSingle: {
type: Boolean,
default: true
}
}, },
model: { model: {
prop: 'value', prop: 'value',
@ -75,7 +79,7 @@
let Dropzone = await import('dropzone') let Dropzone = await import('dropzone')
Dropzone = Dropzone.default || Dropzone Dropzone = Dropzone.default || Dropzone
Dropzone.autoDiscover = false Dropzone.autoDiscover = false
let preview = this.multiple ? this.$refs.previewMultiple : this.$refs.previewSingle; let preview = this.isPreviewSingle ? this.$refs.previewSingle : this.$refs.previewMultiple;
let self = this let self = this
let finalOptions = { let finalOptions = {
...this.options, ...this.options,

View File

@ -18,6 +18,9 @@
@if (!empty($attributes['multiple'])) @if (!empty($attributes['multiple']))
multiple multiple
@endif @endif
@if (!empty($attributes['isPreviewSingle']))
:is-preview-single="{{ $attributes['isPreviewSingle'] }}"
@endif
v-model="{{ !empty($attributes['v-model']) ? $attributes['v-model'] : (!empty($attributes['data-field']) ? 'form.' . $attributes['data-field'] . '.'. $name : 'form.' . $name) }}" v-model="{{ !empty($attributes['v-model']) ? $attributes['v-model'] : (!empty($attributes['data-field']) ? 'form.' . $attributes['data-field'] . '.'. $name : 'form.' . $name) }}"
></dropzone-file-upload> ></dropzone-file-upload>
</div> </div>