業務で使えるオープンソース（113）「Webファイルアップロード」

HTML5によってファイルのマルチ選択およびドラッグ&ドロップでのファイルアップロードが使えるようになりました。これによりそれまで感じていたストレスから解放されるようになったという方は多いと思います。

とはいえデフォルトの機能をそのまま使っているのではユーザビリティは高くありません。そこで使ってみたいのがJavaScriptベースのライブラリです。

主な機能

画像サムネイル表示

HTML5のFile APIを使って読み込み、canvas上にサムネイル表示を行うのが一般的です。アップロードしようとしているファイルを見せることでヒューマンエラーを防げます。

複数ファイル指定

HTML5ではinput type="file" に対してmultipleをつけることで複数ファイルアップロードがサポートされています。ただしこの場合、2ファイルと表示されるだけで具体的な内容が分かりづらいこと、一部のファイルだけ差し替えができないといった問題があります。

そこで複数ファイル指定で受け取った内容をサムネイル表示することで、一部を削ったり追加したりと言った操作をサポートできるようになります。

アップロード進捗表示

簡単そうに見えて意外と面倒なのがこの進捗表示です。クライアント側でファイルサイズを把握し、サーバ側からどれくらいアップロード済みか取得することで進捗表示を行うのが一般的です。

もう一つのやり方はFile APIを使ってファイルをスライスし、サーバ側でファイルを結合するという方法です。これはリジューム機能とも関わってくる手法です。

レジューム

Webブラウザでも巨大なファイルをアップロードするようになっています。動画であれば1GBを超えることも珍しくありません。そんなときにネットワークエラーが起きて最初からやり直しというのはげんなりします。

そこでファイルを分割してアップロードすることで、レジュームを実現できます。ネットワーク負荷は多少大きくなりますが、それでも失敗した時のリスクに比べるとユーザビリティが高くなると思います。

ファイルタイプ指定

input type="file" に対して accept="image/*" といった指定をすることで画像だけを指定できるようにできます。

ファイル加工

最近はデジカメやスマートフォンで撮影した写真が10MBくらいあることもざらです。しかしサービス上はそこまでの巨大なサイズはいらないことも多いので、アップロードする前にクライアントサイドで縮小し、サイズを軽減できます。これはサーバ側はもちろん、ユーザにとってもアップロードが瞬時に終わるのがメリットです。

ただしRetina対応を考えた場合、Web上でのサイズの2倍で取得する方が良いでしょう。

ドラッグ&ドロップ

HTML5の大きなメリットと言えるのがこのドラッグ&ドロップではないでしょうか。ファイルをアップロードする際にダイアログでの指定ではなく、ドロップが使えるのはとても便利です。

とはいえ指定した場所にドロップしないといけないといった制約はあるので注意が必要です。また、フォルダを同時にドロップしたりすることはできません。いくらか便利にはなったけれど、まだ不便さは残っています。