[Vue.js]ドラッグ&ドロップでファイルアップロードするプラグインをnpmに公開

npm install drag-files-drop --save

 npm install axios --save

<template>
  <div class="appDiv">
    <!-- 
        drag-files-dropコンポーネントを使用部分
        dropEnterAreaClass以外のプロパティを使用しています。
    -->
    <dragFilesDrop :selectFileHandler="fileSelect" dropAreaClass='dropFileAreaApp' dropAreaMessage='ファイルドロップ' :isAllowSameFileName="false"/>

    <!--この送信ボタンが押された際にサーバ送信処理をします。 -->
    <button @click="uploadFiles">送信</button>

</div>
</template>

<script>
//コンポーネントのインポート
import dragFilesDrop from 'drag-files-drop'

//cssのインポートもしておきます。
import 'drag-files-drop/dist/drag-files-drop.css'

import { ref } from 'vue'
import axios from 'axios'

export default {
  name: 'App',
  components: {
   dragFilesDrop
  },
  setup(){
    const files = ref([])

    //ドラッグ＆ドロップやファイルが削除した際に呼ばれます。
    //resultにはaction成功可否、dropFilesにはドロップしてあるファイル情報全てが渡されます。
    const fileSelect= ( result, dropFiles )=>{
      if( !result ) alert("同一名称のファイルは選択できません。")
      files.value = dropFiles
    }

    //アップロードメソッドです。
    //送信ボタン押下時に呼ばれます。
    const uploadFiles = () => {
      //FormDataに全てのファイル情報を格納し、サーバの送信するサンプルです。
      let form = new FormData()
      files.value.forEach(f => {
          form.append('file', f)
        }
      )
      axios.post('http://xxxxxxxxxxxxxxx', form).then(response => {
            console.log(response.data)
        }).catch(error => {
            console.log(error)
        });
    }
    return{
        fileSelect,
        uploadFiles
    }
  
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.appDiv{
  width: 200px;
  height: 300px;
}

.dropFileAreaApp {
	font-size: 1.0em;
	color: gray;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 200px;
	border: 7px solid gray;
	border-radius: 10px;
}
</style>