dropzone.js - すべてのファイルがアップロードされた後の処理方法

Question

ドラッグドロップファイルのアップロードソリューションにdropzone.jsを使用しています。私はすべてファイルがアップロードされた後に関数を呼び出す必要がある何かで立ち往生しています。この場合、アップロードされたファイルごとにdoSomething（）が呼び出されます。0123すべてのファイルをアップロードした後、どのように関数を呼び出すことができますか？

Answer 1

EDIT：あなたが使用できるqueuecompleteイベントが用意されました正確にその目的のために。

---

前の答え：まだファイルが完了するたびにキューまたはアップロード中のファイルがある場合

Paul B.'s answer動作しますが、そうする簡単な方法は、チェックすることです。この方法は、あなたがファイル自身を追跡する必要はありません。

Dropzone.options.filedrop = { 
    init: function() { 
    this.on("complete", function (file) { 
     if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) { 
     doSomething(); 
     } 
    }); 
    } 
}; 

Answer 2

これはおそらく方法です（または3つ）...しかし、あなたの目標には1つの問題があります：すべてのファイルがいつアップロードされたかをどのように知っていますか？もっと意味をなさないように言い換えると...「すべて」の意味をどうやって知っていますか？ドキュメントによると、Dropzone自体の初期化時にinitが呼び出され、completeイベントハンドラを設定して、アップロードされた各ファイルが完了したときに何かを実行するように設定します。しかし、ユーザーは、彼がドロップしようとしているすべてのファイルをドロップしたことをプログラムが知ることを可能にするためにどのような仕組みがありますか？あなたがバッチドロップを行うと仮定しているならば（Dropzone 2に何度でもファイルをドロップすることで）、次のコードが動作するはずです：

Dropzone.options.filedrop = { 
    maxFilesize: 4096, 
    init: function() { 
     var totalFiles = 0, 
      completeFiles = 0; 
     this.on("addedfile", function (file) { 
      totalFiles += 1; 
     }); 
     this.on("removed file", function (file) { 
      totalFiles -= 1; 
     }); 
     this.on("complete", function (file) { 
      completeFiles += 1; 
      if (completeFiles === totalFiles) { 
       doSomething(); 
      } 
     }); 
    } 
}; 

基本的に、誰かがDropzoneからファイルを追加/削除したり、クロージャ変数にカウントを保持したりするたびに監視します。次に、各ファイルのダウンロードが完了したら、completeFiles進捗カウンタvarをインクリメントして、ユーザーがDropzoneに物を置いたときにあなたが見て更新したtotalCountと今すぐ一致するかどうかを確認します。 （注意：プラグイン/ JS libにを使用していないので、これはあなたが望む結果を得るために何ができるかについての最良の推測である決して）

Answer 3

this.on("totaluploadprogress", function(totalBytes, totalBytesSent){ 


        if(totalBytes == 100) { 

         //all done! call func here 
        } 
       }); 

Answer 4

「queuecomplete」イベントが追加されました。 Issue 317を参照してください。

Answer 5

私はあなたの方法が簡単なので投票しました。送信するバイトがなくてもイベントが発生することがありますので、私はわずかな修正を加えました。ファイル上の削除ボタンをクリックしたときに私のマシン上で実行しました。まだアップロードまたはキューにあるファイルのチェック中@ enyoの答えに加えて

myDropzone.on("totaluploadprogress", function(totalPercentage, totalBytesToBeSent, totalBytesSent){ 
      if(totalPercentage >= 100 && totalBytesSent) { 
       // All done! Call func here 
      } 
     }); 

Answer 6

が、私もエラー状態で任意のファイルを確認するためにdropzone.jsに新しい関数を作成した（つまり、不正なファイルの種類、サイズなど）。

Dropzone.prototype.getErroredFiles = function() { 
    var file, _i, _len, _ref, _results; 
    _ref = this.files; 
    _results = []; 
    for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
     file = _ref[_i]; 
     if (file.status === Dropzone.ERROR) { 
      _results.push(file); 
     } 
    } 
    return _results; 
}; 

ため、チェックはなる：

if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0 && this.getErroredFiles().length === 0) { 
    doSomething(); 
    } 

Answer 7

は、まさにその存在のために、そののでとても簡単ですqueuecompleteを使用しています。キュー内のすべてのファイルのアップロードが完了したときに呼び出され、ドキュメントhttp://www.dropzonejs.com/

queuecomplete>を確認してください。

 this.on("queuecomplete", function (file) { 
      alert("All files have uploaded "); 
     }); 

Answer 8

私はそのソリューションで動作するようにしようとしていたが、それは動作しません。 しかし、後で私は関数が宣言されていないことを認識していましたので、私はdropzone.comページを見て、イベントを呼び出すための例を取ります。 最後に私のサイトで作業します。 JavaScriptをよく理解していない私のような人にとって、私はあなたに例を残す。

<script type="text/javascript" src="/js/dropzone.js"></script> 
<script type="text/javascript"> 
// This example uses jQuery so it creates the Dropzone, only when the DOM has 
// loaded. 

// Disabling autoDiscover, otherwise Dropzone will try to attach twice. 
Dropzone.autoDiscover = false; 
// or disable for specific dropzone: 
// Dropzone.options.myDropzone = false; 

$(function() { 
    // Now that the DOM is fully loaded, create the dropzone, and setup the 
    // event listeners 
    var myDropzone = new Dropzone(".dropzone"); 

    myDropzone.on("queuecomplete", function(file, res) { 
     if (myDropzone.files[0].status != Dropzone.SUCCESS) { 
      alert('yea baby'); 
     } else { 
      alert('cry baby'); 

     } 
    }); 
}); 
</script>