コラム

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

Web上でファイルのアップロードしたい時などに、ファイルをドラッグ&ドロップして選択しドロップしたファイル情報を管理するVue.jsのプラグインをnpmに公開したので機能や使用方法を紹介したいと思います。

名称は「drag-files-drop」でVue3のみ対応のプラグインとなっています。

機能

  • ドラップ&ドロップしたファイルの管理機能
  • 管理対象のファイルを画面に表示機能
  • 管理対象のファイルの削除機能
  • 同一ファイル名のファイルを追加不許可機能

画面イメージ

ファイルドロップのエリアにファイルをドラッグ&ドロップすると、右の画像の様にドロップしたファイルが一覧で表示されます。ファイル名に左側にあるファイルの画像を押下すると一覧から削除します。

設定可能プロパティ

プロパティ説明
selectFileHandlerファイルが追加、削除された際に呼ばれるハンドラー
ファイル追加、削除の成功可否、コンポーネントで管理しているファイル情報全てが渡される。
isAllowSameFileName同一ファイル名の追加を許可するかを設定する
true:許可
false:不許可
dropAreaClassドロップエリアのスタイルシートのクラスを指定
指定しない場合はデフォルトのスタイルを使用
dropEnterAreaClassドロップエリアにドラッグ状態でマウスが入ってきた際のスタイルシートのクラスを指定
指定しない場合はデフォルトのスタイルを使用
dropAreaMessageドロップエリアに表示する文字列を指定
指定いない場合は「ファイルアップロード」と表示

環境構築

Vueプロジェクトの作成

Vue CliなどでVueプロジェクトを作成します。
Vueバージョンは「3」以上にする必要があります。

drag-files-dropプラグインインストール

プロジェクトを作成したら、プロジェクトフォルダに移動して次のコマンドを実行します。

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>
続けてお読みください

開発の醍醐味

この記事をシェアする
  • Facebookアイコン
  • Twitterアイコン
  • LINEアイコン

お問い合わせ ITに関するお悩み不安が少しでもありましたら、
ぜひお気軽にお問い合わせください

お客様のお悩みや不安、課題などを丁寧に、そして誠実にお伺いいたします。

お問い合わせはこちら
お電話でのお問い合わせ 03-5820-1777(平日10:00〜18:00)
よくあるご質問