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

Webシステムで画像や動画、ファイルのアップロード先としてAmazon S3を利用しているケースは多いかと思います。従来、アップロード処理はサーバを経由して転送する必要がありましたが、今はブラウザから直接S3へ保存できるようになっています。

とはいえトークンの生成など必要な処理が幾つかありますが、それらに加えてレジューム機能まで提供してくれるアップローダーサンプルがEvaporateJSです。

EvaporateJSの使い方

まず最初にAmazon S3の管理画面にてCORS(Cross-Origin Resource Sharing)設定を行う必要があります。

こちらがEvaporateJSの画面。ファイルを指定します。
こちらがEvaporateJSの画面。ファイルを指定します。

小さいファイルであれば一瞬にしてアップロードされます。サーバはトークン生成を行っていますが、ファイルの送信はJavaScriptから直接行っています。
小さいファイルであれば一瞬にしてアップロードされます。サーバはトークン生成を行っていますが、ファイルの送信はJavaScriptから直接行っています。

サーバ側のログ。トークンの生成を行っています。
サーバ側のログ。トークンの生成を行っています。

JavaScript側のログ。トークンの生成後、ファイルを分割して送っています。
JavaScript側のログ。トークンの生成後、ファイルを分割して送っています。

巨大なファイルの場合、分割に時間がかかります。
巨大なファイルの場合、分割に時間がかかります。

100MBを超えるような大きなファイルをアップロードする場合、万一失敗したりしたら二度とやる気がなくなってしまうでしょう。レジュームがあれば安心です。直接S3にアップロードできれば、サーバ側の帯域をムダに消費することもなく使えるので安定運用にもつながるでしょう。

EvaporateJSはJavaScript/Python製、New BSD Licenseのオープンソース・ソフトウェアです。

TTLabs/EvaporateJS

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2