本文へ移動

§09-05Forms

ドラッグ&ドロップ upload

ファイルをドラッグして置く領域でアップロードする。

ファイル選択ダイアログを開かずに直接ファイルを渡せるようにする。複数ファイルや画像をまとめて送る場面で手数を減らす。

実装のポイント

dragover で preventDefault しないと drop が発火しない。ドロップ領域は隠した input type=file と連動させ、クリックとキーボードでも選べるようにする。

特徴
  • ブラウザ API
  • ジェスチャー
デモで使っているもの
  • lucide-react
  • Drag and Drop

このパターンが効く目的