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', $event)"
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';
45import { useI18n } from 'vue-i18n';
46
47export default {
48  name: 'FormFile',
49  components: { BFormFile, IconClose },
50  props: {
51    id: {
52      type: String,
53      default: '',
54    },
55    disabled: {
56      type: Boolean,
57      default: false,
58    },
59    accept: {
60      type: String,
61      default: '',
62    },
63    state: {
64      type: Boolean,
65      default: true,
66    },
67    variant: {
68      type: String,
69      default: 'secondary',
70    },
71  },
72  data() {
73    return {
74      $t: useI18n().t,
75      file: null,
76    };
77  },
78  computed: {
79    isSecondary() {
80      return this.variant === 'secondary';
81    },
82  },
83};
84</script>
85
86<style lang="scss" scoped>
87@import '@/assets/styles/bmc/helpers/_index.scss';
88@import '@/assets/styles/bootstrap/_helpers.scss';
89
90.form-control-file {
91  opacity: 0;
92  height: 0;
93  &:focus + span {
94    box-shadow:
95      inset 0 0 0 3px theme-color('primary'),
96      inset 0 0 0 5px $white;
97  }
98}
99
100// Get mouse pointer on complete element
101.add-file-btn {
102  position: relative;
103  &.disabled {
104    border-color: gray('400');
105    background-color: gray('400');
106    color: gray('600');
107    box-shadow: none !important;
108  }
109}
110
111.clear-selected-file {
112  display: flex;
113  align-items: center;
114  background-color: theme-color('light');
115  word-break: break-all; // break long file name into multiple lines
116  .btn {
117    width: 36px;
118    height: 36px;
119    display: flex;
120    align-items: center;
121
122    &:focus {
123      box-shadow: inset 0 0 0 2px theme-color('primary');
124    }
125  }
126}
127</style>
128