dianping/cat · error · Error

No Dropzone found for given element. This is probably becaus

Error message

No Dropzone found for given element. This is probably because you're trying to access it before Dropzone had the time to initialize. Use the `init` option to setup any additional observers on your Dropzone.

What it means

Dropzone.forElement(el) returns the instance stored on el.dropzone. If the element has no dropzone property — typically because the Dropzone has not been constructed yet, or the selector matched a different/absent element — it throws with guidance to use the init option. It is the accessor behind the jQuery $('.dropzone').dropzone data lookup too.

Source

Thrown at cat-home/src/main/webapp/assets/js/uncompressed/dropzone.js:1542

  Dropzone.options = {};

  Dropzone.optionsForElement = function(element) {
    if (element.getAttribute("id")) {
      return Dropzone.options[camelize(element.getAttribute("id"))];
    } else {
      return void 0;
    }
  };

  Dropzone.instances = [];

  Dropzone.forElement = function(element) {
    if (typeof element === "string") {
      element = document.querySelector(element);
    }
    if ((element != null ? element.dropzone : void 0) == null) {
      throw new Error("No Dropzone found for given element. This is probably because you're trying to access it before Dropzone had the time to initialize. Use the `init` option to setup any additional observers on your Dropzone.");
    }
    return element.dropzone;
  };

  Dropzone.autoDiscover = true;

  Dropzone.discover = function() {
    var checkElements, dropzone, dropzones, _i, _len, _results;
    if (document.querySelectorAll) {
      dropzones = document.querySelectorAll(".dropzone");
    } else {
      dropzones = [];
      checkElements = function(elements) {
        var el, _i, _len, _results;
        _results = [];
        for (_i = 0, _len = elements.length; _i < _len; _i++) {
          el = elements[_i];
          if (/(^| )dropzone($| )/.test(el.className)) {

View on GitHub (pinned to e815e74d4c)

Solutions

1. Move custom observer setup into the init callback: new Dropzone(el, { init: function(){ this.on('sending', ...); } });
2. Before using forElement, check (el && el.dropzone) or wrap the access in a guard.
3. Ensure the element is the same one you constructed on and that construction succeeded (see 'Invalid dropzone element' / 'No URL provided').

Example fix

// before
var dz = Dropzone.forElement('#up'); // runs before init

// after
new Dropzone('#up', {
  url: '/upload',
  init: function () {
    this.on('sending', function (file, xhr, formData) {
      formData.append('csrf', token);
    });
  }
});

var el = document.querySelector('#up');
var dz = el && el.dropzone;
if (dz) {
  dz.on('sending', handler);
} else {
  // safer: configure via init instead of after-the-fact access
}

function getDropzoneInstance(sel) {
  var el = typeof sel === 'string' ? document.querySelector(sel) : sel;
  return (el && el.dropzone) || null;
}

When it happens

Trigger: Calling Dropzone.forElement('#up') (or $('#up').get(0).dropzone accessors) inside code that runs before new Dropzone(...) / before autoDiscover's DOMContentLoaded pass; calling it on a selector that matches nothing (querySelector returns null); calling after instance.destroy() removed the marker.

Common situations: Wiring extra event handlers (e.g. dz.on('sending',...)) in application code that executes before the dropzone script initializes; accessing the instance in inline onclick handlers on fast-rendered pages.

Related errors

• failed to require "{name}"
• Invalid dropzone element.
• Dropzone already attached.
• No URL provided.
• You can't provide both 'acceptedFiles' and 'acceptedMimeType

AI-assisted analysis of dianping/cat@e815e74d4c (2026-08-14). Data as JSON: /api/errors/19088135bdabf988. Report an issue: GitHub.