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

巨大なファイルをアップロードする際に欲しくなるのがリジューム機能です。万一途中でネットワークエラーになったりして最初からやり直し、なんてことになったらもはや二度とアップロードする気にならなくなるでしょう。

今後Webの利用範囲が広がっていく中で、動画をはじめサイズの大きいファイルをアップロードしようと思ったらリジューム機能は欠かせなくなります。そこで使ってみたいのがFlow.jsです。

Flow.jsの使い方

Flow.jsは通常のファイルアップロードの代わりに使えるようになっています。

デモです。ボックスにファイルを追加します。
デモです。ボックスにファイルを追加します。

アップロード中…
アップロード中…

途中で止めたり、一つだけ再開もできます。
途中で止めたり、一つだけ再開もできます。

タネを明かすと、Flow.jsではFile APIを使ってファイルを読み込み、小さく分割(チャンク)してアップロードを行っています。その分ネットワーク接続の回数が多くなりますが、巨大なファイルによるネットワーク接続が独占されないので多人数で同時にファイルアップロードする場合も良さそうです。

また、サーバ側には分割したファイルが送られてきますのでそのファイルを随時保存し、全てがアップロードされた段階で一つのファイルに結合すると言った処理も必要になります。バックエンド向けにはPHP、Java、nodeそしてAOLserver向けが提供されています。

なお画面を再読み込みした際のリジュームにも対応しており、途中から再開されます。ここは一時ファイルをどこまで保存しておくかがサーバサイドとの問題になるかも知れませんが、ネットワークが切断されて、かつ画面を再読み込みしても継続できるのはユーザビリティが高い仕組みと言えそうです。

Flow.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

HTML5 file upload for angular.js

flowjs/flow.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2