やりたいこと
- ドラッグアンドドロップでファイルを選択するフォームを実現する
- ファイルの簡単なプレビューを表示する
やり方
仕様決め
- ドラッグアンドドロップでファイルを選択する
- 通常のファイルを選択からも選択できるようにする
- プレーンテキストファイルを読み込んで簡単なプレビューを表示する
- ファイル名
- ファイルサイズ
- テキストの一行目
- 何かで使えそうなので、キャンセル・送信ボタンを添えておく
イメージは Teams のアナウンスのヘッダー画像選択画面です。
どん
See the Pen Untitled by higege-amdeker (@higege-amdeker) on CodePen.
見栄えをよくするため Bootstrap 5 を使っています。