diff options
Diffstat (limited to 'src/components/Global/FormFile.vue')
-rw-r--r-- | src/components/Global/FormFile.vue | 56 |
1 files changed, 43 insertions, 13 deletions
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue index cf713acf..18c542c3 100644 --- a/src/components/Global/FormFile.vue +++ b/src/components/Global/FormFile.vue @@ -1,26 +1,38 @@ <template> <div class="custom-form-file-container"> <label> - <b-form-file - :id="id" - v-model="file" - :accept="accept" - :disabled="disabled" - :state="state" - plain - @input="$emit('input', file)" + <b-modal + :id="`modal-${id}`" + body-class="modal-file-body" + :title="$t('pageKvm.addImage_modal')" + hide-footer > - </b-form-file> - <span - class="add-file-btn btn" + <div class="file-input_container"> + <b-form-file + :id="id" + v-model="file" + :accept="accept" + :disabled="disabled" + :state="state" + placeholder="Нажмите на область или перетащите в нее файл" + drop-placeholder="Отпустите, чтобы добавить файл" + @input="$emit('input', file)" + > + </b-form-file> + </div> + </b-modal> + <b-button + size="lg" + class="add-file-btn" :class="{ disabled, 'btn-secondary': isSecondary, 'btn-primary': !isSecondary, }" + @click="$bvModal.show(`modal-${id}`)" > {{ $t('global.fileUpload.browseText') }} - </span> + </b-button> <slot name="invalid"></slot> </label> <div v-if="file" class="clear-selected-file px-3 py-2 mt-2"> @@ -78,9 +90,15 @@ export default { return this.variant === 'secondary'; }, }, + watch: { + file() { + if (this.file) { + this.$bvModal.hide(`modal-${this.id}`); + } + }, + }, }; </script> - <style lang="scss" scoped> .form-control-file { opacity: 0; @@ -116,4 +134,16 @@ export default { } } } + +.file-input_container { + width: 100%; + height: 400px; + background-color: $surface-secondary; + border-top: 1px solid #f3f4f5; + border-radius: 0 0 16px 16px; + + display: flex; + align-items: center; + justify-content: center; +} </style> |