わたねこコーリング

野良プログラマ発、日々のアウトプット

file input を使わないでスマートな画像アップロードを実現する

今日は、ウェブプログラマの皆さんにはお馴染みの「画像アップロード」について。いまどきはウェブアプリでも画像登録機能なんてのが開発要件として普通にある訳ですが、これが結構古くて新しい問題というか厄介な代物です。勿論、file input (type 属性が file の input タグ)でちょちょいのちょいと実装するのはカンタンなんですが、それだと決して U/I 的には使い勝手がよくない訳ですよね。具体的には、

  • 画像ファイル選択の際にドラッグ & ドロップできない。
  • アップロードする前に画像のプレビューができない。
  • AJAX でのアップロードができない。

という所が今どき何とかならんかなぁと。HTML5 もやっと勧告が出たことだし、ここはひとつ気合入れて使い勝手のよい画像アップロード手法を考えてみるかぁ! と本気出してみましたw 説明は後にして、デモをご覧頂ければと(↓)。

https://labo.mariyudu.net/img4form/

アップロードするには、「No Image」となっているデフォルト画像の上に、適当なローカルファイル画像をドラッグ&ドロップしてアップロードボタンをクリックするだけです。画像が AJAX 経由でサーバにアップロードされ、そのリンクが表示されます。

仕掛けは大筋で以下のような感じ。

  1. D&D の際に FileReader インターフェースを使って hidden input の value 属性に画像のバイナリデータ(data:image/jpeg;base64,xxxx の形式)をセットする。
  2. アップロードボタンクリックで、上記 hidden input の内容をサーバに POST する。
  3. サーバ側では値の文字列をパースして、base64 デコードしてファイルに保存する。

とまぁ、仕組みはシンプルなもんです。画像上にボタンを配置する等、U/I として画像アップロードのイージーオペレーションを突き詰めてみたところを評価して頂ければと。まだ作ってみたばかりで汎用的に使えるか自信が無いのでデモに留めますが、業務等で揉んでみてモノになりそうだったら github デビューでもさせようかなー。