DropzoneJSのautoProcessQueueとprocessQueueの組み合わせは要注意

はじめに

Webブラウザのドラッグ＆ドロップ領域にファイルを放り込めば、WordPressへ投稿できるような仕組みを作りたいと思い、とりあえず既存のライブラリを探すことにしました。

調べたところ、Drag＆Dropからアップロード処理まで行なってくれるDropzoneJSがよさそうでした。理由としては、対応するWebブラウザが多く、jsファイル１つで動作するところです。

drop時にprocessQueueメソッドを呼ぶと3回目にハングする

DropzoneJSのサイトにある説明を見ながら、以下のようにざっくり書いてみました。

drop時に自動的にアップロードされないように、autoProcessQueue: falseとして、drop後にアップロードの確認を行うようにしました。

3回目でFirefoxがハングしました。流れは、1回目は失敗（何も起こらない）、2回目は成功、3回目でハングです。

デバッガで確認すると、1回目はファイル情報が登録される前にアップロードが実行されました。が、ファイルが未登録と判定され、実際には何も処理が発生していません。2回目は、2回目にドロップしたファイルではなく、1回目のファイルがアップロードされました。3回目で、Firefoxがハングアップしました。

よくよく考えると、droppedじゃないので、ここでprocessQueue()を呼んではいけないですね。

dropイベントとprocessQueueメソッドを分ける

もう少し追ってみるとdropイベントが終わるとファイル情報が格納されていることが分かりました。この後にprocessQueue()を呼ぶと、問題なく動作したので、ドロップ処理とアップロード処理（processQueue）を別々にしました。

最初のコードからdrop内のprocessQueue()を削除し、適当にボタンを作ってdrop後にprocessQueue()を実行するとうまくいきました。

$('#button').click(function(){
    if(window.confirm('アップロードしますか？')){
        dropzone.processQueue();
    }
});

おまけ

ドラッグ＆ドロップやファイルアップロードで色々と見つけたのでリストアップ。

高機能すぎて使いにくいかも。使いこなせれば便利そうです。

“It has been tested and works on Firefox and Chrome.”に引っかかったのと、ダウンロードにPay with a TweetやPay with a Facebook postとあったので試していません。何も問題はないようですが、一手間かかると面倒になります。

上2つは、ファイルのアップロードのみです。

おわりに

ドキュメントをしっかりと読みましょう。