Adding queuecomplete to dropzone.js

Question

I have been trying to figure our how to add the queuecomplete callback option to dropzone.js. I read dropzone.js - how to do something after ALL files are uploaded but it shows a couple options, but I do not understand where/how to implement this. I tried adding the code after the reference to dropzone.js, in dropzone.js, etc with no luck. I was just trying to make it simple with the minimal form with the dropzone class.

I tried:

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

and also

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

but keep getting Dropzone is not defined.

I think I just need to know how to implement this.

Answer 1

You must add the JavaScript file first, and after the script you are working with.

<script src="./path/to/dropzone.js"></script>
<script>
Dropzone.options.filedrop = {
  init: function () {
      this.on("queuecomplete", function (file) {
          alert("All files have uploaded ");
      });
  }
};
</script>

Below it is a working snnipet that don't give the error (you can't upload on stackoverflow because the action don't exist)

Dropzone.options.filedrop = {
  init: function () {
      this.on("queuecomplete", function (file) {
          alert("All files have uploaded ");
      });
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">


<p>
  This is the most minimal example of Dropzone. The upload in this example
  doesn't work, because there is no actual server to handle the file upload.
</p>

<!-- Change /upload-target to your upload address -->
<form action="/upload-target" class="dropzone"></form>

Note: If you are using jQuery you can add the code inside $(document).ready(function { /* add here */ });.