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