1<template>
2  <div class="custom-form-file-container">
3    <label>
4      <b-form-file
5        :id="id"
6        v-model="file"
7        :accept="accept"
8        :disabled="disabled"
9        :state="state"
10        plain
11        @input="$emit('input', file)"
12      >
13      </b-form-file>
14      <span
15        class="add-file-btn btn"
16        :class="{
17          disabled,
18          'btn-secondary': isSecondary,
19          'btn-primary': !isSecondary,
20        }"
21      >
22        {{ $t('global.fileUpload.browseText') }}
23      </span>
24      <slot name="invalid"></slot>
25    </label>
26    <div v-if="file" class="clear-selected-file px-3 py-2 mt-2">
27      {{ file ? file.name : '' }}
28      <b-button
29        variant="light"
30        class="px-2 ml-auto"
31        :disabled="disabled"
32        @click="file = null"
33        ><icon-close :title="$t('global.fileUpload.clearSelectedFile')" /><span
34          class="sr-only"
35          >{{ $t('global.fileUpload.clearSelectedFile') }}</span
36        >
37      </b-button>
38    </div>
39  </div>
40</template>
41
42<script>
43import { BFormFile } from 'bootstrap-vue';
44import IconClose from '@carbon/icons-vue/es/close/20';
45
46export default {
47  name: 'FormFile',
48  components: { BFormFile, IconClose },
49  props: {
50    id: {
51      type: String,
52      default: '',
53    },
54    disabled: {
55      type: Boolean,
56      default: false,
57    },
58    accept: {
59      type: String,
60      default: '',
61    },
62    state: {
63      type: Boolean,
64      default: true,
65    },
66    variant: {
67      type: String,
68      default: 'secondary',
69    },
70  },
71  data() {
72    return {
73      file: null,
74    };
75  },
76  computed: {
77    isSecondary() {
78      return this.variant === 'secondary';
79    },
80  },
81};
82</script>
83
84<style lang="scss" scoped>
85.form-control-file {
86  opacity: 0;
87  height: 0;
88  &:focus + span {
89    box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
90  }
91}
92
93// Get mouse pointer on complete element
94.add-file-btn {
95  position: relative;
96  &.disabled {
97    border-color: gray('400');
98    background-color: gray('400');
99    color: gray('600');
100    box-shadow: none !important;
101  }
102}
103
104.clear-selected-file {
105  display: flex;
106  align-items: center;
107  background-color: theme-color('light');
108  .btn {
109    width: 36px;
110    height: 36px;
111    display: flex;
112    align-items: center;
113
114    &:focus {
115      box-shadow: inset 0 0 0 2px theme-color('primary');
116    }
117  }
118}
119</style>
120