jQuery File Uploadを利用した大容量ファイルのアップロードをChunked uploadで実現する

大容量のファイルをアップする際に、通常のinput type=fileで送ろうとすると
herokuだとタイムアウトになったりして上手くいかなかった。
なので、jQueryのファイルアップロードプラグインにある、chunk uploadを利用してアップした。

・Github
blueimp/jQuery-File-Upload

公式のjQuery File Uploadのデモは以下。
https://blueimp.github.io/jQuery-File-Upload/

セットアップの流れは以下を参考に。
https://github.com/blueimp/jQuery-File-Upload/wiki/Setup

通常のアップロード

以下から最新バージョンをダウンロード。
https://github.com/blueimp/jQuery-File-Upload/releases

解凍して、PHPが動作する環境のドキュメントルートにアップロード。
そのままアクセスすると動作する。

アップしたファイルは、
/server/php/files/以下にアップされる。

Chunk File

このライブラリによるアップロードの容量制限はありますか？という質問には、一応、4GBです、とのこと。
これはブラウザの制限のよう。
ただし、Chunked file upload、という方法を使って、とのこと。

requently Asked Questions · blueimp/jQuery-File-Upload Wiki · GitHub

このChunked file uploadという方法は、大きいサイズのファイルを指定したサイズに分割して少しづつアップロードし、アップロード後に合体させる方法、とのこと。
(特にこのライブラリ特有の話ではないよう。)

Chunked file uploads · blueimp/jQuery-File-Upload Wiki · GitHub

使い方はいたって簡単で、通常のfileuploadのオプションに、maxChunkSizeの指定を追加するだけ。

例）通常

$('#fileupload').fileupload({
    url: url,
    dataType: 'json'
});

Chunked upload

$('#fileupload').fileupload({
    maxChunkSize: 20000000,
    url: url,
    dataType: 'json'
});

Callback Option

以下で一覧を参照可能。
Options · blueimp/jQuery-File-Upload Wiki · GitHub

Chunked Upload関連では以下のオプションがあった。

fileuploadchunksend
fileuploadchunkdone
fileuploadchunkfail
fileuploadchunkalways

それぞれ分割したファイルがアップロードされる度に呼び出されるので、結構な回数呼ばれる。

ソース

一式全部上げておく。
アップロードやエラーの処理については以下を参考にさせてもらいました。
JavaScript(jQuery)からPHPのAPIを利用する – Qiita

ファイル構造は以下のようになっている。
htmlファイル以外はダウンロードしてきたまんま。

public(ドキュメントルート)
└─file_upload
  ├─cors/
  ├─css/
  ├─img/
  ├─js/
  ├─server/
  │   ├─php/
  │   └─files/
  └─chunked_upload.html

まとめ

herokuではgit管理でアップしたもの以外はデプロイなどでの再起動時に消えてしまいます。
なので、これでアップしてもそのまま残っているわけではないのでご注意ください。
じゃあどうするかというと、一旦アップして、ここからどこかに転送する、とかそういうもののために作成した次第です。
とはいえ、heroku以外でもchunked uploadを使えば、一時停止やリジュームなど、通信が切れても続きから再開したりとかが出来るようなので、普通のサーバー用途でも便利そう。

KayaMemo