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