file group partial enhancement
This commit is contained in:
parent
f13677e0a3
commit
964a4f5c4b
@ -1,14 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="dropzone mb-3 dz-clickable" :class="[isPreviewSingle ? 'dropzone-single': 'dropzone-multiple']">
|
<div class="dropzone mb-3 dz-clickable" :class="[!multiple ? 'dropzone-single': 'dropzone-multiple']">
|
||||||
<div class="fallback">
|
<div class="fallback">
|
||||||
<div class="custom-file">
|
<div class="custom-file">
|
||||||
<input type="file" class="custom-file-input" :id="'projectCoverUploads' + _uid" :multiple="multiple">
|
<input type="file" class="custom-file-input" :id="'projectCoverUploads' + _uid" :multiple="multiple">
|
||||||
|
|
||||||
<label class="custom-file-label" :for="'projectCoverUploads' + _uid">{{ textChooseFile }}</label>
|
<label class="custom-file-label" :for="'projectCoverUploads' + _uid">{{ textChooseFile }}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="isPreviewSingle" class="dz-preview dz-preview-single" :class="previewClasses" ref="previewSingle">
|
<div v-if="!multiple" class="dz-preview dz-preview-single" :class="previewClasses" ref="previewSingle">
|
||||||
<div class="dz-preview-cover">
|
<div class="dz-preview-cover">
|
||||||
<img class="dz-preview-img" data-dz-thumbnail>
|
<img class="dz-preview-img" data-dz-thumbnail>
|
||||||
</div>
|
</div>
|
||||||
@ -25,12 +25,13 @@
|
|||||||
|
|
||||||
<div class="col ml--3">
|
<div class="col ml--3">
|
||||||
<h4 class="mb-1" data-dz-name>...</h4>
|
<h4 class="mb-1" data-dz-name>...</h4>
|
||||||
|
|
||||||
<p class="small text-muted mb-0" data-dz-size>...</p>
|
<p class="small text-muted mb-0" data-dz-size>...</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<button data-dz-remove="true" class="btn btn-danger btn-sm">
|
<button data-dz-remove="true" class="btn btn-danger btn-sm">
|
||||||
<i class="fas fa-trash"></i>
|
<i class="fas fa-trash"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -68,10 +69,6 @@ export default {
|
|||||||
description: 'Multiple file Upload'
|
description: 'Multiple file Upload'
|
||||||
},
|
},
|
||||||
previewClasses: [String, Object, Array],
|
previewClasses: [String, Object, Array],
|
||||||
isPreviewSingle: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
model: {
|
model: {
|
||||||
@ -90,7 +87,11 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
async initDropzone() {
|
async initDropzone() {
|
||||||
let self = this;
|
let self = this;
|
||||||
let preview = this.isPreviewSingle ? this.$refs.previewSingle : this.$refs.previewMultiple;
|
let preview = !this.multiple ? this.$refs.previewSingle : this.$refs.previewMultiple;
|
||||||
|
|
||||||
|
if (!this.options.maxFiles && !this.multiple) {
|
||||||
|
this.options['maxFiles'] = 1;
|
||||||
|
}
|
||||||
|
|
||||||
let finalOptions = {
|
let finalOptions = {
|
||||||
...this.options,
|
...this.options,
|
||||||
@ -101,7 +102,7 @@ export default {
|
|||||||
previewTemplate: preview.innerHTML,
|
previewTemplate: preview.innerHTML,
|
||||||
autoProcessQueue: false,
|
autoProcessQueue: false,
|
||||||
init: function () {
|
init: function () {
|
||||||
this.on("addedfile", function (file) {
|
this.on('addedfile', function (file) {
|
||||||
self.files.push(file);
|
self.files.push(file);
|
||||||
|
|
||||||
if (self.options.maxFiles == 1) {
|
if (self.options.maxFiles == 1) {
|
||||||
@ -110,7 +111,8 @@ export default {
|
|||||||
self.$emit('change', self.files);
|
self.$emit('change', self.files);
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
this.on("removedfile", function (file) {
|
|
||||||
|
this.on('removedfile', function (file) {
|
||||||
let index = self.files.findIndex(f => f.upload.uuid === file.upload.uuid);
|
let index = self.files.findIndex(f => f.upload.uuid === file.upload.uuid);
|
||||||
|
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
@ -119,23 +121,27 @@ export default {
|
|||||||
|
|
||||||
self.$emit('change', self.files);
|
self.$emit('change', self.files);
|
||||||
|
|
||||||
if(self.isPreviewSingle == false)
|
if (self.multiple) {
|
||||||
this.enable()
|
this.enable();
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
this.on("maxfilesexceeded", function(file) {
|
|
||||||
|
this.on('maxfilesexceeded', function(file) {
|
||||||
this.removeAllFiles('notCancel');
|
this.removeAllFiles('notCancel');
|
||||||
this.addFile(file);
|
this.addFile(file);
|
||||||
}),
|
}),
|
||||||
this.on("maxfilesreached", function(file) {
|
|
||||||
if(self.isPreviewSingle == false)
|
this.on('maxfilesreached', function(file) {
|
||||||
this.disable()
|
if (self.multiple) {
|
||||||
|
this.disable();
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.dropzone = new Dropzone(this.$el, finalOptions);
|
this.dropzone = new Dropzone(this.$el, finalOptions);
|
||||||
|
|
||||||
preview.innerHTML = ''
|
preview.innerHTML = '';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -31,7 +31,7 @@
|
|||||||
|
|
||||||
@if (!$hideAttachment)
|
@if (!$hideAttachment)
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
{{ Form::fileGroup('attachment', trans('general.attachment'), '', ['dropzone-class' => 'w-100', 'options' => ['maxFiles' => '10', ''], 'multiple' => 'multiple', 'isPreviewSingle' => 'false'], null, 'col-md-12') }}
|
{{ Form::fileGroup('attachment', trans('general.attachment'), '', ['dropzone-class' => 'w-100', 'multiple' => 'multiple'], !empty($document) ? $document->attachment : null , 'col-md-12') }}
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
@ -12,23 +12,23 @@
|
|||||||
@if (!empty($attributes['dropzone-class']))
|
@if (!empty($attributes['dropzone-class']))
|
||||||
class="{{ $attributes['dropzone-class'] }}"
|
class="{{ $attributes['dropzone-class'] }}"
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if (!empty($attributes['options']))
|
@if (!empty($attributes['options']))
|
||||||
@if (isset($attributes['options']['maxFiles']))
|
:options={{ json_encode($attributes['options']) }}
|
||||||
:options={{ json_encode($attributes['options']) }}
|
|
||||||
@else
|
|
||||||
@php $attributes['options']['maxFiles'] = 1 @endphp
|
|
||||||
:options={{ json_encode($attributes['options']) }}
|
|
||||||
@endif
|
|
||||||
@else
|
|
||||||
@php $attributes['options']['maxFiles'] = 1 @endphp
|
|
||||||
:options={{ json_encode($attributes['options']) }}
|
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if (!empty($attributes['multiple']))
|
@if (!empty($attributes['multiple']))
|
||||||
multiple
|
multiple
|
||||||
@endif
|
@endif
|
||||||
@if (isset($attributes['isPreviewSingle']))
|
|
||||||
:is-preview-single="{{ $attributes['isPreviewSingle'] }}"
|
@if (!empty($attributes['previewClasses']))
|
||||||
|
preview-classes="{{ $attributes['previewClasses'] }}"
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
|
@if (!empty($attributes['url']))
|
||||||
|
url="{{ $attributes['url'] }}"
|
||||||
|
@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) }}"
|
||||||
></akaunting-dropzone-file-upload>
|
></akaunting-dropzone-file-upload>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user