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