和田憲幸のブログ

Youtube Movie

気になっていたHTML5のFileAPIとDrag&Drop APIを使って、ブラウザにファイルを放り込んだらアップできるクラウドストレージプログラムを作ってみました。それが「DropCloudStorage」ダッ！FileAPIのデモのつもりで作ったのですが思いのほか使い勝手が良かったのでね。

このブログにも搭載されているWeb-dock（左側のやつ）は何もブロマイドを出すために作られたわけじゃないんです。最初からこういう用途を想定していたんですよ何年も前になっ！割といい感じでハマッてご満悦です。やっぱり私はスゴいね。素晴らしい。自画自賛ですいません。

原理は簡単でDrag&Drop用のイベントをweb-dockにセットしてdropされた時にFileAPIでファイルを受け取り、FileReaderでresultを取り出してAjaxでCGIにpostしています。multipartで送らなきゃいけないと思っていたのですが、FileReaderのresultから取り出した値はBase64に予めエンコードされており、普通にpostできました。すごい楽チン。

問題点としてはFileReaderが実装されているブラウザがChromeとFirefox4しか無いということ。SafariはFileAPIには対応しているけどFileReaderはまだ実装されていない。とはいえ、管理サイドへの実装であればchromeとFirefoxが対応していれば十分ですよね。

詳細は動画をみてください。
とっても簡単ですごく便利です。我ながらよいものを作った。
FileAPIとDrag&Drop絡みで作りたいものが結構出てきたので今年はバリバリつくるゾ！

そしてお手数ですがよければ感想をどうぞ！