ドラッグ&ドロップファイルアップロード
ドラッグ&ドロップ式のアップロードエリアは、ファイルを枠の中に放り込んで添付できる入力 UI です。実体は label で囲んだ input type="file" で、見た目の枠は破線（ border:2px dashed ）で「ここに置ける」ことを示します。
解説
ドラッグ&ドロップ式のアップロードエリアは、ファイルを枠の中に放り込んで添付できる入力 UI です。実体は label で囲んだ input type="file" で、見た目の枠は破線（border:2px dashed）で「ここに置ける」ことを示します。JavaScript では dragenter・dragover でファイルが上に来たときに is-over クラスを付け、dragleave・drop で外すことで、枠の色と背景がふわっと反応します。クリックでも従来のファイル選択ダイアログが開きます。
こんな場面に
- EC の商品画像や証明書のアップロード
- 管理画面での CSV・資料の取り込み
- 問い合わせフォームの添付ファイル欄
枠線の色や角丸、ホバー時の背景は CSS で簡単に変えられます。注意点として、このスニペットは見た目の反応までを担当し、実際のファイル保存やプレビュー表示は別途実装が必要です。アイコンに絵文字を使っていますが、本番では端末差をなくすため SVG アイコンへの差し替えを推奨します。クリックでも選べる二重対応にしておくと、ドラッグが使えない環境でも確実に操作できます。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
ドロップしたファイルはどこに保存されますか？
このスニペットは枠が反応する見た目の挙動までを担当します。実際のファイルの読み込みやサーバーへの送信、プレビュー表示は drop イベントの中で別途処理を追加する必要があります。
クリックでもファイルを選べますか？
はい。全体を label で input type="file" を囲んでいるため、枠のどこをクリックしても標準のファイル選択ダイアログが開きます。ドラッグが難しい環境でもクリックで操作できる二重対応になっています。