dianping/cat · error · Error

Invalid ` ` option provided. Please provide a CSS selector…

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.

Solutions

Ensure every selector in the clickable option matches at least one existing element.
Pass DOM nodes or selector strings, not jQuery objects; unwrap with .get()/.toArray().
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')

Defensive patterns

Strategy: validation

Validate before calling

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;

Type guard

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

Prevention

Unwrap jQuery collections with .toArray() before passing to dropzone options.
Verify each clickable selector matches real markup on that page.
Default clickable to null (use the whole dropzone element) when custom triggers are absent.

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

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

Appendix: 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)