Merge pull request #1771 from SevanNerse/master
component dropzone related works
This commit is contained in:
commit
3ac6bb98ac
@ -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);
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
@ -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')
|
||||||
|
@ -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')
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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', []) }}
|
||||||
|
|
||||||
|
@ -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', []) }}
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user