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>
<div class="dropzone mb-3 dz-clickable"
:class="[multiple ? 'dropzone-multiple': 'dropzone-single']">
:class="[isPreviewSingle ? 'dropzone-single': 'dropzone-multiple']">
<div class="fallback">
<div class="custom-file">
<input type="file"
@ -11,7 +11,7 @@
</div>
</div>
<div class="dz-preview dz-preview-single"
v-if="!multiple"
v-if="isPreviewSingle"
:class="previewClasses"
ref="previewSingle">
<div class="dz-preview-cover">
@ -57,7 +57,11 @@
default: 'http://'
},
multiple: Boolean,
previewClasses: [String, Object, Array]
previewClasses: [String, Object, Array],
isPreviewSingle: {
type: Boolean,
default: true
}
},
model: {
prop: 'value',
@ -75,8 +79,9 @@
let Dropzone = await import('dropzone')
Dropzone = Dropzone.default || Dropzone
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 finalOptions = {
...this.options,
url: this.url,
@ -84,33 +89,41 @@
thumbnailHeight: null,
previewsContainer: preview,
previewTemplate: preview.innerHTML,
maxFiles: (!this.multiple) ? 1 : null,
acceptedFiles: (!this.multiple) ? 'image/*' : null,
init: function () {
this.on("addedfile", function (file) {
if (!self.multiple && self.currentFile) {
// this.removeFile(this.currentFile);
self.files.push(file)
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)
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']
evtList.forEach(evt => {
this.dropzone.on(evt, (data) => {
this.$emit(evt, data);
if (evt === 'addedfile') {
this.files.push(data)
this.$emit('change', this.files);
} else if (evt === 'removedfile') {
if (evt === 'removedfile') {
let index = this.files.findIndex(f => f.upload.uuid === data.upload.uuid)
if (index !== -1) {
this.files.splice(index, 1);
}
this.$emit('change', this.files);
}
})
})

View File

@ -44,7 +44,7 @@
</div>
@stack('picture_input_end')
@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
@can('read-common-companies')

View File

@ -45,7 +45,7 @@
</div>
@stack('picture_input_end')
@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
@can('read-common-companies')

View File

@ -31,7 +31,7 @@
{{ 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) }}
</div>

View File

@ -32,7 +32,7 @@
{{ 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) }}
</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::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) }}
</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::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) }}
</div>

View File

@ -9,7 +9,7 @@
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
@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
</div>

View File

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

View File

@ -34,7 +34,7 @@
{{ 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>

View File

@ -31,7 +31,7 @@
{{ 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', []) }}

View File

@ -32,7 +32,7 @@
{{ 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', []) }}

View File

@ -28,7 +28,7 @@
{{ 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>

View File

@ -59,7 +59,7 @@
{{ 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>