【Vue.js】ドラッグ&ドロップで、ファイルアップロードできるコンポーネントを作る。

2018-12-11

見た目はこのような感じのを想定しています!

テンプレート部分の説明

こんな感じで作ります!

①ドラックされている間(isDrag == newの時)は、 -drag というクラスをつけます。

これで、CSSで以下のように表示することができてドラック出来ていることがわかりやすいです!

② dragover時に、 -drag クラスをつけ、③dragleave時に外します。

※Vue.jsではイベント名の後に.preventと書くように、しましょう!そのまま、ドラッグ&ドロップをしてしまうと、ブラウザがファイルを表示してしまうので、.preventで、その処理をキャンセルすることができます。

④実際の処理は、 checkDrag メソッドに書きます。ドラッグするアイテムは一つであれば、 isDrag = true にすればいいだけですが、今回は、ドラッグ&ドロップできるアイテムが複数あることを想定して、key名で判定を行うようにしています。

※ドラッグしてきたアイテムが、ファイルではなく、htmlの時を想定し、 event.dataTransfer.types == "text/plain" の時は、処理を行わないようにしています。

⑤デザインの都合上、input type=”file”は、 style="display:none;" し、ラベルで囲みます。これで、「ファイルを選択」ラベルを押したときもファイルアップロードができるようになりますね!!

⑥changeイベントで、ファイルアップロード処理が発火するようにします。

ファイルアップロード機能を作成する

①ファイル選択から呼ばれた場合、 event.target.files からファイルを取得でき、ドラッグ&ドロップの場合は、 event.dataTransfer.files で取得することができます。

後は、ajaxで送るようなデータに整形して、Ajaxでファイルアップロードするだけなのですが、以下の2点に注意してください。

1.②送信データはFormDataを使う

2.③このままだと、同じファイル名を選択した際にchangeイベントが走らなくなってしまうので、 event.target.value = null しておきましょう!

 

 

—————————

この記事がお役に立てたら、是非シェアをお願いします^^