Displaying an Upload Completion Alert for File Uploads

Introduction

When users upload multiple big files through a file upload field, it is sometimes necessary to notify them once all files have completed uploading. This article explains how to trigger a browser alert that informs users when the upload queue has fully finished.

How does it work?

Dropzone provides a queuecomplete event that fires once all files in the upload queue are fully processed. The script below attaches to this event and displays a simple alert message. Because Dropzone instances may not be immediately available at page load, the script includes checks, retries, and a MutationObserver to ensure the hook is applied even when the form loads dynamically.

1. In Form Builder, add a Form Upload element to the form.
2. Add a Custom HTML element to the form and insert the following script:

<script>
(function () {
  function showUploadCompleteAlert() {
    alert("All files have been uploaded successfully.");
  }

  function attachWhenReady(el) {
    if (!el || !window.Dropzone) return;

    if (el.dropzone) {
      if (!el.__dzHooked) {
        el.__dzHooked = true;
        el.dropzone.on("queuecomplete", showUploadCompleteAlert);
      }
    } else {
      var tries = 0;
      var iv = setInterval(function () {
        tries++;
        if (el.dropzone) {
          clearInterval(iv);
          if (!el.__dzHooked) {
            el.__dzHooked = true;
            el.dropzone.on("queuecomplete", showUploadCompleteAlert);
          }
        } else if (tries > 50) {
          clearInterval(iv);
        }
      }, 100);
    }
  }

  function scanAllDropzones() {
    document.querySelectorAll(".dropzone").forEach(attachWhenReady);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", scanAllDropzones);
  } else {
    scanAllDropzones();
  }

  new MutationObserver(function (muts) {
    muts.forEach(function (m) {
      m.addedNodes.forEach(function (n) {
        if (!(n instanceof Element)) return;
        if (n.matches && n.matches(".dropzone")) attachWhenReady(n);
        var inner = n.querySelectorAll ? n.querySelectorAll(".dropzone") : [];
        inner.forEach(attachWhenReady);
      });
    });
  }).observe(document.documentElement, { childList: true, subtree: true });
})();
</script>

Expected Outcome

Users will see a clear notification once all files in the upload queue have been successfully uploaded. The alert will not close automatically, but it provides immediate confirmation that the upload process is complete.

Download sample app