Merge pull request #1771 from SevanNerse/master

component dropzone related works
This commit is contained in:
Cüneyt Şentürk 2021-01-18 10:48:15 +03:00 committed by GitHub
commit 3ac6bb98ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 42 additions and 26 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,8 +79,9 @@
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,
url: this.url, url: this.url,
@ -84,33 +89,41 @@
thumbnailHeight: null, thumbnailHeight: null,
previewsContainer: preview, previewsContainer: preview,
previewTemplate: preview.innerHTML, previewTemplate: preview.innerHTML,
maxFiles: (!this.multiple) ? 1 : null,
acceptedFiles: (!this.multiple) ? 'image/*' : null,
init: function () { init: function () {
this.on("addedfile", function (file) { this.on("addedfile", function (file) {
if (!self.multiple && self.currentFile) { self.files.push(file)
// this.removeFile(this.currentFile);
if (self.options.maxFiles == 1) {
self.$emit('change', file)
} else {
self.$emit('change', this.files)
} }
self.currentFile = file; }),
this.on("maxfilesexceeded", function(file) {
this.removeAllFiles('notCancel')
this.addFile(file)
}) })
} }
} }
this.dropzone = new Dropzone(this.$el, finalOptions) this.dropzone = new Dropzone(this.$el, finalOptions)
preview.innerHTML = '' preview.innerHTML = ''
let evtList = ['drop', 'dragstart', 'dragend', 'dragenter', 'dragover', 'addedfile', 'removedfile', 'thumbnail', 'error', 'processing', 'uploadprogress', 'sending', 'success', 'complete', 'canceled', 'maxfilesreached', 'maxfilesexceeded', 'processingmultiple', 'sendingmultiple', 'successmultiple', 'completemultiple', 'canceledmultiple', 'totaluploadprogress', 'reset', 'queuecomplete'] let evtList = ['drop', 'dragstart', 'dragend', 'dragenter', 'dragover', 'addedfile', 'removedfile', 'thumbnail', 'error', 'processing', 'uploadprogress', 'sending', 'success', 'complete', 'canceled', 'maxfilesreached', 'maxfilesexceeded', 'processingmultiple', 'sendingmultiple', 'successmultiple', 'completemultiple', 'canceledmultiple', 'totaluploadprogress', 'reset', 'queuecomplete']
evtList.forEach(evt => { evtList.forEach(evt => {
this.dropzone.on(evt, (data) => { this.dropzone.on(evt, (data) => {
this.$emit(evt, data); this.$emit(evt, data);
if (evt === 'addedfile') { if (evt === 'removedfile') {
this.files.push(data)
this.$emit('change', this.files);
} else if (evt === 'removedfile') {
let index = this.files.findIndex(f => f.upload.uuid === data.upload.uuid) let index = this.files.findIndex(f => f.upload.uuid === data.upload.uuid)
if (index !== -1) { if (index !== -1) {
this.files.splice(index, 1); this.files.splice(index, 1);
} }
this.$emit('change', this.files); this.$emit('change', this.files);
} }
}) })
}) })

View File

@ -44,7 +44,7 @@
</div> </div>
@stack('picture_input_end') @stack('picture_input_end')
@else @else
{{ Form::fileGroup('picture', trans_choice('general.pictures', 1), '', ['dropzone-class' => 'form-file']) }} {{ Form::fileGroup('picture', trans_choice('general.pictures', 1), '', ['dropzone-class' => 'form-file', 'options' => ['acceptedFiles' => 'image/*']]) }}
@endif @endif
@can('read-common-companies') @can('read-common-companies')

View File

@ -45,7 +45,7 @@
</div> </div>
@stack('picture_input_end') @stack('picture_input_end')
@else @else
{{ Form::fileGroup('picture', trans_choice('general.pictures', 1), '', ['dropzone-class' => 'form-file']) }} {{ Form::fileGroup('picture', trans_choice('general.pictures', 1), '', ['dropzone-class' => 'form-file', 'options' => ['acceptedFiles' => 'image/*']]) }}
@endif @endif
@can('read-common-companies') @can('read-common-companies')

View File

@ -31,7 +31,7 @@
{{ Form::textareaGroup('address', trans('general.address')) }} {{ Form::textareaGroup('address', trans('general.address')) }}
{{ Form::fileGroup('logo', trans('companies.logo'), '', ['dropzone-class' => 'form-file']) }} {{ Form::fileGroup('logo', trans('companies.logo'), '', ['dropzone-class' => 'form-file', 'options' => ['acceptedFiles' => 'image/*']]) }}
{{ Form::radioGroup('enabled', trans('general.enabled'), true) }} {{ Form::radioGroup('enabled', trans('general.enabled'), true) }}
</div> </div>

View File

@ -32,7 +32,7 @@
{{ Form::textareaGroup('address', trans('general.address')) }} {{ Form::textareaGroup('address', trans('general.address')) }}
{{ Form::fileGroup('logo', trans('companies.logo'), '', ['dropzone-class' => 'form-file']) }} {{ Form::fileGroup('logo', trans('companies.logo'), '', ['dropzone-class' => 'form-file', 'options' => ['acceptedFiles' => 'image/*']]) }}
{{ Form::radioGroup('enabled', trans('general.enabled'), $company->enabled) }} {{ Form::radioGroup('enabled', trans('general.enabled'), $company->enabled) }}
</div> </div>

View File

@ -29,7 +29,7 @@
{{ Form::selectRemoteAddNewGroup('category_id', trans_choice('general.categories', 1), 'folder', $categories, null, ['path' => route('modals.categories.create') . '?type=item', 'remote_action' => route('categories.index'). '?search=type:item']) }} {{ Form::selectRemoteAddNewGroup('category_id', trans_choice('general.categories', 1), 'folder', $categories, null, ['path' => route('modals.categories.create') . '?type=item', 'remote_action' => route('categories.index'). '?search=type:item']) }}
{{ Form::fileGroup('picture', trans_choice('general.pictures', 1), 'plus', ['dropzone-class' => 'form-file']) }} {{ Form::fileGroup('picture', trans_choice('general.pictures', 1), 'plus', ['dropzone-class' => 'form-file', 'options' => ['acceptedFiles' => 'image/*']]) }}
{{ Form::radioGroup('enabled', trans('general.enabled'), true) }} {{ Form::radioGroup('enabled', trans('general.enabled'), true) }}
</div> </div>

View File

@ -30,7 +30,7 @@
{{ Form::selectRemoteAddNewGroup('category_id', trans_choice('general.categories', 1), 'folder', $categories, $item->category_id, ['path' => route('modals.categories.create') . '?type=item', 'remote_action' => route('categories.index'). '?search=type:item']) }} {{ Form::selectRemoteAddNewGroup('category_id', trans_choice('general.categories', 1), 'folder', $categories, $item->category_id, ['path' => route('modals.categories.create') . '?type=item', 'remote_action' => route('categories.index'). '?search=type:item']) }}
{{ Form::fileGroup('picture', trans_choice('general.pictures', 1), '', ['dropzone-class' => 'form-file']) }} {{ Form::fileGroup('picture', trans_choice('general.pictures', 1), '', ['dropzone-class' => 'form-file', 'options' => ['acceptedFiles' => 'image/*']]) }}
{{ Form::radioGroup('enabled', trans('general.enabled'), $item->enabled) }} {{ Form::radioGroup('enabled', trans('general.enabled'), $item->enabled) }}
</div> </div>

View File

@ -9,7 +9,7 @@
<div class="row"> <div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
@if (!$hideLogo) @if (!$hideLogo)
{{ Form::fileGroup('company_logo', trans('settings.company.logo'), 'file-image-o', ['data-field' => 'setting'], setting('company.logo')) }} {{ Form::fileGroup('company_logo', trans('settings.company.logo'), 'file-image-o', ['data-field' => 'setting', 'options' => ['acceptedFiles' => 'image/*']], setting('company.logo')) }}
@endif @endif
</div> </div>

View File

@ -13,11 +13,14 @@
class="{{ $attributes['dropzone-class'] }}" class="{{ $attributes['dropzone-class'] }}"
@endif @endif
@if (!empty($attributes['options'])) @if (!empty($attributes['options']))
options={{ json_encode($attributes['options']) }} :options={{ json_encode($attributes['options']) }}
@endif @endif
@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>

View File

@ -34,7 +34,7 @@
{{ Form::selectGroup('locale', trans_choice('general.languages', 1), 'flag', language()->allowed(), $user->locale) }} {{ Form::selectGroup('locale', trans_choice('general.languages', 1), 'flag', language()->allowed(), $user->locale) }}
{{ Form::fileGroup('picture', trans_choice('general.pictures', 1), '', ['dropzone-class' => 'form-file']) }} {{ Form::fileGroup('picture', trans_choice('general.pictures', 1), '', ['dropzone-class' => 'form-file', 'options' => ['acceptedFiles' => 'image/*']]) }}
</div> </div>
</div> </div>

View File

@ -31,7 +31,7 @@
{{ Form::textareaGroup('address', trans('general.address')) }} {{ Form::textareaGroup('address', trans('general.address')) }}
{{ Form::fileGroup('logo', trans_choice('general.pictures', 1), '', ['dropzone-class' => 'form-file']) }} {{ Form::fileGroup('logo', trans_choice('general.pictures', 1), '', ['dropzone-class' => 'form-file', 'options' => ['acceptedFiles' => 'image/*']]) }}
{{ Form::textGroup('reference', trans('general.reference'), 'file', []) }} {{ Form::textGroup('reference', trans('general.reference'), 'file', []) }}

View File

@ -32,7 +32,7 @@
{{ Form::textareaGroup('address', trans('general.address')) }} {{ Form::textareaGroup('address', trans('general.address')) }}
{{ Form::fileGroup('logo', trans_choice('general.logos', 1), '', ['dropzone-class' => 'form-file']) }} {{ Form::fileGroup('logo', trans_choice('general.logos', 1), '', ['dropzone-class' => 'form-file', 'options' => ['acceptedFiles' => 'image/*']]) }}
{{ Form::textGroup('reference', trans('general.reference'), 'file', []) }} {{ Form::textGroup('reference', trans('general.reference'), 'file', []) }}

View File

@ -28,7 +28,7 @@
{{ Form::textareaGroup('address', trans('settings.company.address'), null, setting('company.address')) }} {{ Form::textareaGroup('address', trans('settings.company.address'), null, setting('company.address')) }}
{{ Form::fileGroup('logo', trans('settings.company.logo'), 'file-image-o', ['dropzone-class' => 'form-file'], setting('company.logo')) }} {{ Form::fileGroup('logo', trans('settings.company.logo'), 'file-image-o', ['dropzone-class' => 'form-file', 'options' => ['acceptedFiles' => 'image/*']], setting('company.logo')) }}
</div> </div>
</div> </div>

View File

@ -59,7 +59,7 @@
{{ Form::textareaGroup('address', trans('settings.company.address')) }} {{ Form::textareaGroup('address', trans('settings.company.address')) }}
{{ Form::fileGroup('logo', trans('settings.company.logo'), '', ['dropzone-class' => 'form-file']) }} {{ Form::fileGroup('logo', trans('settings.company.logo'), '', ['dropzone-class' => 'form-file', 'options' => ['acceptedFiles' => 'image/*']]) }}
</div> </div>
</div> </div>