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 class="add-file-btn btn btn-primary" :class="{ disabled }">
15        {{ $t('global.fileUpload.browseText') }}
16      </span>
17      <slot name="invalid"></slot>
18    </label>
19    <div v-if="file" class="clear-selected-file px-3 py-2 mt-2">
20      {{ file ? file.name : '' }}
21      <b-button
22        variant="light"
23        class="px-2 ml-auto"
24        :disabled="disabled"
25        @click="file = null"
26        ><icon-close :title="$t('global.fileUpload.clearSelectedFile')" /><span
27          class="sr-only"
28          >{{ $t('global.fileUpload.clearSelectedFile') }}</span
29        >
30      </b-button>
31    </div>
32  </div>
33</template>
34
35<script>
36import { BFormFile } from 'bootstrap-vue';
37import IconClose from '@carbon/icons-vue/es/close/20';
38
39export default {
40  name: 'FormFile',
41  components: { BFormFile, IconClose },
42  props: {
43    id: {
44      type: String,
45      default: '',
46    },
47    disabled: {
48      type: Boolean,
49      default: false,
50    },
51    accept: {
52      type: String,
53      default: '',
54    },
55    state: {
56      type: Boolean,
57      default: true,
58    },
59  },
60  data() {
61    return {
62      file: null,
63    };
64  },
65};
66</script>
67
68<style lang="scss" scoped>
69.form-control-file {
70  opacity: 0;
71  height: 0;
72  &:focus + span {
73    box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
74  }
75}
76
77// Get mouse pointer on complete element
78.add-file-btn {
79  position: relative;
80}
81
82.clear-selected-file {
83  display: flex;
84  align-items: center;
85  background-color: theme-color('light');
86  .btn {
87    width: 36px;
88    height: 36px;
89    display: flex;
90    align-items: center;
91
92    &:focus {
93      box-shadow: inset 0 0 0 2px theme-color('primary');
94    }
95  }
96}
97</style>
98