file group partial enhancement

This commit is contained in:
Cüneyt Şentürk 2021-01-22 14:12:24 +03:00
parent f13677e0a3
commit 964a4f5c4b
3 changed files with 36 additions and 30 deletions

View File

@ -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 = '';
} }
}, },

View File

@ -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>

View File

@ -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>