b-form-file drop

HTML

<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<div id="app">
  <div>
    <b-form-file v-model="files" multiple directory placeholder="Choose or drop" drop-placeholder="Dropping" :file-name-formatter="formatNames"></b-form-file>
    <ul>
    <li v-for="file in files">{{file}}</li>
    </ul>
  </div>
</div>

CSS

body { padding: 1rem; }

JavaScript

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        files: []
      }
    },
    watch: {
      files(newVal) {
        console.log(`files \n${newVal}`)
      }
    },
    methods: {
      formatNames(files) {
        console.log('formatNames was called!')
        if (files.length === 1) {
          return files[0].name
        } else {
          return `${files.length} files selected`
        }
      },
    }
  })
}