ITエンジニア/デザイナ向けにオープンソースを毎日紹介

html5uploaderはHTML5を使ってドラッグアンドドロップによるファイルアップロードを実現するライブラリ。

html5uploaderはHTML5製のオープンソース・ソフトウェア。HTMLで最も嫌だったのがファイルアップロードの手間が大きいことだった。一つのファイルボックスで一つのファイルしかアップロードできないというのはとても面倒だった。Flashで作られた擬似的アップロードツールでファイルが複数選択できるようになったのが救いでもあった。


デモ。この枠にドロップする。

それがHTML5によって複数ファイルのアップロードに対応するようになり、便利になった。だがファイル選択のダイアログが面倒なのは変わらない。それを改善してくれるライブラリがhtml5uploaderだ。

html5uploaderはボックスを表示してその中にファイルをドラッグアンドドロップするだけでアップロードを行ってくれるライブラリだ。デモでは実際のアップロード処理は行わないものの、ドロップされたファイルをdata URIを使うことで画像のサムネイルが表示されるようになっている。


サムネイル表示

html5uploader自体は後はアップロード先のURLを指定するだけでドロップした直後からアップロード処理が行われるようになっている。提供されるのはPHPスクリプトだが、特にサーバサイドに依存性はない。フォルダのアップロードはできないが、ファイルをドロップするだけで良いという手軽さは利用場面が多そうだ。


MOONGIFTはこう見る

個人的なベストな解決策はWebDAVにあると思っているが、まだまだ本格的な立ち上げにはほど遠い(最も実現しているのはiDiskくらいだろう)。そのような現状にあって一番現実的な解としてはHTML5を使ったドラッグアンドドロップにあると言えるだろう。

Gmailでも使われているので、その操作法には知られるようになっている。自分のサイトでもドキュメントや写真のアップロード処理を行う時に使えるのではないだろうか。ほんの小さな工夫かもしれないが、ユーザ(特にヘビーユーザ)にとっては大きな利点になりえるはずだ。

html5uploader - Drag & drop files to browser using HTML 5, PHP and JS - Google Project Hosting

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2