Form File - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/form-file

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <!-- Simple File -->
  <b-form-file v-model="file"></b-form-file>
  <br> Selected file: {{file && file.name}}

  <div class="mt-3">
    <!-- Customized labels -->
    <a href="#">
    <b-form-file label="test" v-model="file2"   choose-label="Attachment2"></b-form-file>
    </a>
    <br> Selected file : {{file2 && file2.name}}
  </div>
</div>

CSS

#app {
  padding: 20px;
  height: 450px;
}

JavaScript

window.app = new Vue({
  el: '#app',
  data: {
    file: null,
    file2: null
  }
});