cakephp+fine-uploader

みんな大好きcakephpにドラッグアンドドロップができたりアップロード中にプログレスバーが出たりとなかなかイイカンジのアップローダー「fine-uploader」を組み込んだときに悩んだものあれこれの記録。見なくていいです。
　
１．CSRF対策
fine-uploaderに限らずcakephpでformヘルパー以外でデータのやりとりすると必ず出てくる。
・1つ目。cakephp側でCSRF対策を切る
　
public function beforeFilter(Event $event)
{
parent::beforeFilter($event);
if ($this->request->action == ‘uploader’) {
$this->getEventManager()->off($this->Csrf);//特定のアクションのみCSRFを切る
}
}
汎用的な方法。
　
・2つ目。script内でtokenを送信する
　
request: {
params: {
aaa: document.getElementById(“aaa”).value
},
endpoint: “/uploader”,
customHeaders: {‘X-CSRF-Token’: $(‘input:hidden[name=”_csrfToken”]’).val()}//この行を追加
},
　
初めparamsに記述したけどダメで、customHeadersで記述したらうまくいった。もちろんこっちのほうがいい。
　
２．名前変更時の処理
fine-uploaderはファイル選択後に名前を変更できる機能があるけど、変更後の名前は別の変数に格納される。
ファイル本体は”qqfile”に入るが変更後の名前は”qqfilename”に保存されるので、変更後の名前は$this->request->getData(‘qqfilename’)で取得する。
　
３．フォーム内容の送信
form内の初期のvalue値はparamsで送信できるけど、手入力した値はparamsでは送信できない。
入力値を送るにはcallbacksのonUploadで値をセットする必要がある。
　
callbacks: {
onUpload: function(id){
this.setParams({name: document.getElementById(“name”).value})//ここに入力値を記述する
},
onError: function(id, filename, message, xhr) {
alert(message);
},
　
４．ファイルを選択したかどうか確認する方法
ファイル未選択時に送信を実行するとエラーが出てじゃまなので事前に確認したい。
ファイル選択の内容は qq-upload-list li に格納されるようなのでjqueryの
　
$(‘.qq-upload-list li’).length の値(何もなかったら0、入ってたらそれ以外)でファイルの有無を確認できる。
　
qq(document.getElementById(“trigger-upload”)).attach(“click”, function() {
if ($(‘.qq-upload-list li’).length) {//if文でファイルの有無を確認
manualUploader.uploadStoredFiles();
}
});
　
参考にしたサイトさま
Matsup’s blog
fine-uploader documentation
ほかにも参考にしたサイトあったけど忘れた…