- 03-5820-1777平日10:00〜18:00
- お問い合わせ
Web上でファイルのアップロードしたい時などに、ファイルをドラッグ&ドロップして選択しドロップしたファイル情報を管理するVue.jsのプラグインをnpmに公開したので機能や使用方法を紹介したいと思います。
名称は「drag-files-drop」でVue3のみ対応のプラグインとなっています。
ファイルドロップのエリアにファイルをドラッグ&ドロップすると、右の画像の様にドロップしたファイルが一覧で表示されます。ファイル名に左側にあるファイルの画像を押下すると一覧から削除します。
プロパティ | 説明 |
---|---|
selectFileHandler | ファイルが追加、削除された際に呼ばれるハンドラー ファイル追加、削除の成功可否、コンポーネントで管理しているファイル情報全てが渡される。 |
isAllowSameFileName | 同一ファイル名の追加を許可するかを設定する true:許可 false:不許可 |
dropAreaClass | ドロップエリアのスタイルシートのクラスを指定 指定しない場合はデフォルトのスタイルを使用 |
dropEnterAreaClass | ドロップエリアにドラッグ状態でマウスが入ってきた際のスタイルシートのクラスを指定 指定しない場合はデフォルトのスタイルを使用 |
dropAreaMessage | ドロップエリアに表示する文字列を指定 指定いない場合は「ファイルアップロード」と表示 |
Vue CliなどでVueプロジェクトを作成します。
Vueバージョンは「3」以上にする必要があります。
プロジェクトを作成したら、プロジェクトフォルダに移動して次のコマンドを実行します。
npm install drag-files-drop --save
ファイルをサーバへ送信するのにaxiosを使用する場合は次のコマンドも実行します。
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>