{"record":{"id":"095641608b7a8f48","repo":"dianping/cat","slug":"invalid-dropzone-element","errorCode":null,"errorMessage":"Invalid dropzone element.","messagePattern":"Invalid dropzone element\\.","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"cat-home/src/main/webapp/assets/js/uncompressed/dropzone.js","lineNumber":579,"sourceCode":"          target[key] = val;\n        }\n      }\n      return target;\n    };\n\n    function Dropzone(element, options) {\n      var elementOptions, fallback, _ref;\n      this.element = element;\n      this.version = Dropzone.version;\n      this.defaultOptions.previewTemplate = this.defaultOptions.previewTemplate.replace(/\\n*/g, \"\");\n      this.clickableElements = [];\n      this.listeners = [];\n      this.files = [];\n      if (typeof this.element === \"string\") {\n        this.element = document.querySelector(this.element);\n      }\n      if (!(this.element && (this.element.nodeType != null))) {\n        throw new Error(\"Invalid dropzone element.\");\n      }\n      if (this.element.dropzone) {\n        throw new Error(\"Dropzone already attached.\");\n      }\n      Dropzone.instances.push(this);\n      this.element.dropzone = this;\n      elementOptions = (_ref = Dropzone.optionsForElement(this.element)) != null ? _ref : {};\n      this.options = extend({}, this.defaultOptions, elementOptions, options != null ? options : {});\n      if (this.options.forceFallback || !Dropzone.isBrowserSupported()) {\n        return this.options.fallback.call(this);\n      }\n      if (this.options.url == null) {\n        this.options.url = this.element.getAttribute(\"action\");\n      }\n      if (!this.options.url) {\n        throw new Error(\"No URL provided.\");\n      }\n      if (this.options.acceptedFiles && this.options.acceptedMimeTypes) {","sourceCodeStart":561,"sourceCodeEnd":597,"githubUrl":"https://github.com/dianping/cat/blob/e815e74d4c2dd74edac831241f1253fcc7d25381/cat-home/src/main/webapp/assets/js/uncompressed/dropzone.js#L561-L597","documentation":"The Dropzone constructor accepts a selector string or DOM element. It resolves the selector with document.querySelector, then requires the result to be a real DOM node (nodeType present). If the selector matched nothing (null) or an invalid element was passed, it throws 'Invalid dropzone element.' before doing anything else.","triggerScenarios":"new Dropzone('#myUpload') or Dropzone.create('#myUpload') where #myUpload does not exist in the DOM at call time; initializing inside $(document).ready but the element is created later by AJAX; typo'd selector; passing undefined/null because a variable was not set.","commonSituations":"Initializing dropzone in a script that runs before the form is rendered (script at top of page, or content injected dynamically); SPA-ish pages where the upload form appears after the picker script ran; copy-paste of example selectors without adapting them.","solutions":["Verify the element exists before constructing: if (!document.querySelector(sel)) return;","Initialize after the element is in the DOM — move the script below the markup or hook the code that renders the form.","Check the selector for typos and that autoDiscover's .dropzone class is actually on the intended element."],"exampleFix":"// before\nnew Dropzone('#upload-form'); // element not yet in DOM\n\n// after\n$(function () {\n  var el = document.querySelector('#upload-form');\n  if (el && !el.dropzone) {\n    new Dropzone(el, { url: '/upload' });\n  }\n});","handlingStrategy":"type-guard","validationCode":"function resolveDropzoneTarget(sel) {\n  var el = typeof sel === 'string' ? document.querySelector(sel) : sel;\n  return (el && el.nodeType === 1) ? el : null;\n}\nvar target = resolveDropzoneTarget('#upload');\nif (target) new Dropzone(target, { url: '/upload' });","typeGuard":"function isAttachedElement(el) {\n  return !!el && typeof el === 'object' && el.nodeType === 1 && el.ownerDocument;\n}","tryCatchPattern":"try { dz = new Dropzone(sel, opts); } catch (e) {\n  if (/Invalid dropzone element/.test(e.message)) {\n    console.warn('Upload form not rendered yet; deferring init');\n    deferredInit.push({ sel: sel, opts: opts });\n  } else throw e;\n}","preventionTips":["Initialize dropzone only after the upload markup exists (ready handler or post-AJAX callback).","Log a warning when the selector misses instead of letting the error break the page.","Prefer passing resolved DOM nodes, so failures are explicit null checks."],"tags":["dropzone","dom","selector","initialization","vendor"],"backgroundTag":null,"analyzedSha":"e815e74d4c2dd74edac831241f1253fcc7d25381","analyzedAt":"2026-08-14T14:22:34.512Z","schemaVersion":2},"datasetVersion":"2026-08-15T17:31:12.345Z"}