xref: /openbmc/webui-vue/src/components/Global/FormFile.vue (revision 7d6b44cb263da09e575c7cb28cab88c1eb339c7b) 
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@import '@/assets/styles/bmc/helpers/_index.scss';
86@import '@/assets/styles/bootstrap/_helpers.scss';
87
88.form-control-file {
89  opacity: 0;
90  height: 0;
91  &:focus + span {
92    box-shadow:
93      inset 0 0 0 3px theme-color('primary'),
94      inset 0 0 0 5px $white;
95  }
96}
97
98// Get mouse pointer on complete element
99.add-file-btn {
100  position: relative;
101  &.disabled {
102    border-color: gray('400');
103    background-color: gray('400');
104    color: gray('600');
105    box-shadow: none !important;
106  }
107}
108
109.clear-selected-file {
110  display: flex;
111  align-items: center;
112  background-color: theme-color('light');
113  word-break: break-all; // break long file name into multiple lines
114  .btn {
115    width: 36px;
116    height: 36px;
117    display: flex;
118    align-items: center;
119
120    &:focus {
121      box-shadow: inset 0 0 0 2px theme-color('primary');
122    }
123  }
124}
125</style>
126