dianping/cat · error · Error

Invalid `{name}` option provided. Please provide a CSS selec

Error message

Invalid `{name}` option provided. Please provide a CSS selector, a plain HTML element or a list of those.

What it means

The plural variant getElements(els, name) resolves options that may be a single element/selector or a list (clickable accepts arrays). It normalizes arrays, selector strings (querySelectorAll), and single nodes into an array; if the result is empty or null — nothing matched, or the input type was invalid (e.g. a jQuery object or a number) — it throws naming the option.

Source

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

          el = els[_i];
          elements.push(this.getElement(el, name));
        }
      } catch (_error) {
        e = _error;
        elements = null;
      }
    } else if (typeof els === "string") {
      elements = [];
      _ref = document.querySelectorAll(els);
      for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
        el = _ref[_j];
        elements.push(el);
      }
    } else if (els.nodeType != null) {
      elements = [els];
    }
    if (!((elements != null) && elements.length)) {
      throw new Error("Invalid `" + name + "` option provided. Please provide a CSS selector, a plain HTML element or a list of those.");
    }
    return elements;
  };

  Dropzone.confirm = function(question, accepted, rejected) {
    if (window.confirm(question)) {
      return accepted();
    } else if (rejected != null) {
      return rejected();
    }
  };

  Dropzone.isValidFile = function(file, acceptedFiles) {
    var baseMimeType, mimeType, validType, _i, _len;
    if (!acceptedFiles) {
      return true;
    }
    acceptedFiles = acceptedFiles.split(",");

View on GitHub (pinned to e815e74d4c)

Solutions

1. Ensure every selector in the clickable option matches at least one existing element.
2. Pass DOM nodes or selector strings, not jQuery objects; unwrap with .get()/.toArray().
3. Verify the elements exist at construction time (render before init).

Example fix

// before
new Dropzone('#up', { clickable: $('.dz-trigger') }); // jQuery object -> throws

// after
new Dropzone('#up', { clickable: '.dz-trigger' });
// or nodes: document.querySelectorAll('.dz-trigger')

function resolveDropzoneElements(v) {
  var list = [];
  if (typeof v === 'string') list = Array.prototype.slice.call(document.querySelectorAll(v));
  else if (v && v.nodeType === 1) list = [v];
  else if (Object.prototype.toString.call(v) === '[object Array]') {
    list = v.map(function (i) {
      return typeof i === 'string' ? document.querySelector(i) : i;
    });
  }
  return list.filter(function (e) { return e && e.nodeType === 1; });
}
var clickable = resolveDropzoneElements(opts.clickable);
if (clickable.length) opts.clickable = clickable; else delete opts.clickable;

function isElementList(v) {
  return (Array.isArray(v) && v.every(function (e) { return e && e.nodeType === 1; })) ||
    (v && v.nodeType === 1) || typeof v === 'string';
}

When it happens

Trigger: clickable: ['.dz-trigger', '.dz-trigger-2'] where none match; clickable: true is not valid for this version; passing a jQuery collection ($( ... )) which is neither Array, string, nor node; selector list where some entries match nothing (empty overall array after a string branch matching zero nodes).

Common situations: Custom upload button markup differing between pages while the config is global; migrating from dropzone versions where clickable:true was allowed; mixing jQuery objects into dropzone options.

Related errors

• Invalid dropzone element.
• Invalid `{name}` option provided. Please provide a CSS selec
• failed to require "{name}"
• Dropzone already attached.
• No URL provided.

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