[vue.js] fileアップロード用のdrag&dropエリアを持つコンポーネントを作成する

vue.jsでdrag&dropを使用したアップロード用コンポーネントを作っていきます。

環境等

項目 バージョン
node v10.15.3
npm 6.4.1
vue.js 2.6.10

実装

drag&dropエリア

エリアの作成

divタグで適当な大きさのボックスを作成します。
今回は、以下サイズのエリアになります。

  • min-width: 200px
  • min-height: 200px
  • width: 100%
  • height: 100%

イベントの設定

drop,dragoverイベントのブラウザデフォルトの処理が動かないようにすることが重要です。
デフォルトの処理が実行されると、dropしたファイルをブラウザが表示してしまうため、実行したいdrop処理が実行されません。

dragoverイベントに対しては、特にイベントを指定したいわけではなくデフォルト処理を止めたいだけなので、.prevent修飾子を利用します。
dropも同様に利用したうえで、fileを取得する処理を記載しています。

取得したファイル情報はカスタムイベントで親コンポーネントに返しています。
リスナに以下の様な関数を登録すれば、Amplify Storageを利用してS3にputすることができます。

コード

コンポーネントのコードのみとなります。

<template>
<div
class="drag-area"
@dragover.prevent
@drop.prevent="upload"
>
<input type="file" @change="upload" />
<span>{{ areaMessage }}</span>
</div>
</template>
<script>
export default {
name: "Upload",
props: {
areaMessage: {
type: String,
default: "Upload File"
}
},
methods: {
upload(event) {
const files = event.target.files || event.dataTransfer.files;
this.$emit("upload", files);
}
}
};
</script>
<style lang="sass" scoped>
.drag-area
width: 100%
min-width: 200px
height: 100%
min-height: 200px
border: 1px dotted rgba(0,0,0,0.1)
border-radius: 8px
display: flex
justify-content: center
align-items: center
flex-direction: column
background-color: #F5F5F5
input
opacity: 0
</style>

view raw
Upload.vue
hosted with ❤ by GitHub

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA