概要
画像アップロード機能ってそれだけ聞くと１つの機能なのですが、実は終わりが見えづらい機能ですよね。どこまでもリッチに機能追加できるし、セキュリティ対策も山ほどありますし、見積もりが難しい。
（もちろん仕様がカッチリきまっていればそれでOKです）
なぜなのか
１. 画像をどこに置くんだ問題
ローカル環境なら全然問題ないですよ。本番環境だと複数台構成前提でしょうからS3やGCSなどに置く前提になりますよね。そうなると、
- 「APIキー発行して」
- 「あっ権限なかった..○○さんにSlackで連絡っと...」
- 「次に本番用とステージング用とフォルダ構成を考えて...」
- 「あ〜〜！（むしゃくしゃ） >< （Yahooニュースみよう！）」
２. 良さげなライブラリを探すの面倒問題
- 「このライブラリいいね評価も高い。あ、でもメンテナンスもうされてないか...」
- 「おっと、こっちのはドキュメントがすごくわかりやすい」
- 「やっぱり前使ってたあれにするか〜」
- 「あ〜〜！（むしゃくしゃ） >< （ホッテントリみよう！）」
すみません。先人の方たちのライブラリには大変お世話になっております。
皆様のおかげで日々飯が食べれております。本当に感謝です。
３. UI・UXをどうするんだ問題
- ドラッグ&ドロップあり？
- 複数枚同時？
- キャンセル処理は？
- プレビュー機能は？
- アップロード中の見せ方どうする？
無限にあります。おそらくここが一番大変。イケてるサイトを参考にするしかない。
４. エラーハンドリングはどこまで頑張るんだ問題
- JPEG、PNG、HEIC/HEIF、WebP...
- ファイルサイズ
- ファイル選択直後のJS側によるバリデーションどうする
無限にあります。バリデーションはある程度こっちで実装しちゃいましょう。
５. 画像のリサイズ等を対応するのか問題
- アップロード時に自動（バックエンド側）で自動圧縮する？
- リサイズする？
- アップロード前にユーザ側のクロッピング（切り取り）機能搭載する？
う〜んヒットしたら搭載しましょう...
６. NGな画像をアップロードされたらどうする問題
- 運営側の承認後に掲載されるルールにする？
いや運用でカバーしよう...
７. Chrome以外のブラウザでちゃんと動くのか問題
これは特に ３ の UI/UX の部分の事。
総括
リストアップしてみると、まだまだありそうですが、とりあえず７つ。
「当たり前にやりなさい」という内容なのだが、やっぱり（仕様が決まっていないと）大変。