bootstrap-vue/src/components/form-file/fixtures/form-file.html

BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup.

<div id="app">
    <!-- Simple File -->
    <b-form-file v-model="file"></b-form-file>
    <br> Selected file: {{file && file.name}}
    <br>

    <div class="mt-3">
        <!-- Multiple files -->
        <b-form-file v-model="files" multiple></b-form-file>
        <br> Selected file : {{[].map.call(files, f=>f.name).join(',')}}
    </div>
    <br>
    
    <!-- Plain File -->
    <b-form-file plain v-model="file2" class="mt-3"></b-form-file>
    <br> Selected file: {{file2 && file2.name}}
    <br>

    <!-- Invalid File -->
    <b-form-file state="invalid" v-model="file3" class="mt-3"></b-form-file>
    <br> Selected file: {{file3 && file3.name}}
</div>