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