1 files changed, 51 insertions, 13 deletions
diff --git a/src/components/_sila/Global/FormFile.vue b/src/components/_sila/Global/FormFile.vue
index cf713acf..50af468e 100644
--- a/src/components/_sila/Global/FormFile.vue
+++ b/src/components/_sila/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,17 @@ export default {
       return this.variant === 'secondary';
     },
   },
+  watch: {
+    file() {
+      if (this.file) {
+        this.$bvModal.hide(`modal-${this.id}`);
+      } else {
+        this.$emit('input', this.file);
+      }
+    },
+  },
 };
 </script>
-
 <style lang="scss" scoped>
 .form-control-file {
   opacity: 0;
@@ -116,4 +136,22 @@ 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;
+}
+
+.custom-form-file-container {
+  label {
+    margin-bottom: 0;
+  }
+}
 </style>