本文へ移動

§09-06Forms

ペースト upload

クリップボードの画像を貼り付けてアップロードする。

スクリーンショットをファイルに保存する手間なく、そのまま添付できる。チャットや不具合報告のように画像を頻繁に添える場面で効く。

実装のポイント

paste の clipboardData.items から image/* を拾い getAsFile で File 化する。プレビューは createObjectURL で作り、不要になったら revoke する。

特徴
  • ブラウザ API
デモで使っているもの
  • shadcn/ui
  • lucide-react
  • File API