fix(dropzone): prevent dropzone exception if target element missing

app/assets/javascripts/dropzone_input.js

@@ -290,5 +290,5 @@ export default function dropzoneInput(form) {
     formTextarea.focus();
   });
 
-  return Dropzone.forElement($formDropzone.get(0));
+  return $formDropzone.get(0) ? Dropzone.forElement($formDropzone.get(0)) : null;
 }

changelogs/unreleased/fix-dropzone-no-element-exception.yml

+---
+title: Prevent Dropzone.js initialisation error by checking target element existence
+merge_request: 20256
+author: Fabio Huser
+type: fixed

spec/javascripts/dropzone_input_spec.js

@@ -13,54 +13,68 @@ const TEMPLATE = `<form class="gfm-form" data-uploads-path="${TEST_UPLOAD_PATH}"
 </form>`;
 
 describe('dropzone_input', () => {
-  let form;
-  let dropzone;
-  let xhr;
-  let oldXMLHttpRequest;
+  it('returns null when failed to initialize', () => {
+    const dropzone = dropzoneInput($('<form class="gfm-form"></form>'));
 
-  beforeEach(() => {
-    form = $(TEMPLATE);
+    expect(dropzone).toBeNull();
+  });
 
-    dropzone = dropzoneInput(form);
+  it('returns valid dropzone when successfully initialize', () => {
+    const dropzone = dropzoneInput($(TEMPLATE));
 
-    xhr = jasmine.createSpyObj(Object.keys(XMLHttpRequest.prototype));
-    oldXMLHttpRequest = window.XMLHttpRequest;
-    window.XMLHttpRequest = () => xhr;
+    expect(dropzone.version).toBeTruthy();
   });
 
-  afterEach(() => {
-    window.XMLHttpRequest = oldXMLHttpRequest;
-  });
+  describe('shows error message', () => {
+    let form;
+    let dropzone;
+    let xhr;
+    let oldXMLHttpRequest;
 
-  it('shows error message, when AJAX fails with json', () => {
-    xhr = {
-      ...xhr,
-      statusCode: 400,
-      readyState: 4,
-      responseText: JSON.stringify({ message: TEST_ERROR_MESSAGE }),
-      getResponseHeader: () => 'application/json',
-    };
+    beforeEach(() => {
+      form = $(TEMPLATE);
 
-    dropzone.processFile(TEST_FILE);
+      dropzone = dropzoneInput(form);
 
-    xhr.onload();
+      xhr = jasmine.createSpyObj(Object.keys(XMLHttpRequest.prototype));
+      oldXMLHttpRequest = window.XMLHttpRequest;
+      window.XMLHttpRequest = () => xhr;
+    });
 
-    expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
-  });
+    afterEach(() => {
+      window.XMLHttpRequest = oldXMLHttpRequest;
+    });
+
+    it('when AJAX fails with json', () => {
+      xhr = {
+        ...xhr,
+        statusCode: 400,
+        readyState: 4,
+        responseText: JSON.stringify({ message: TEST_ERROR_MESSAGE }),
+        getResponseHeader: () => 'application/json',
+      };
+
+      dropzone.processFile(TEST_FILE);
+
+      xhr.onload();
+
+      expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
+    });
 
-  it('shows error message, when AJAX fails with text', () => {
-    xhr = {
-      ...xhr,
-      statusCode: 400,
-      readyState: 4,
-      responseText: TEST_ERROR_MESSAGE,
-      getResponseHeader: () => 'text/plain',
-    };
+    it('when AJAX fails with text', () => {
+      xhr = {
+        ...xhr,
+        statusCode: 400,
+        readyState: 4,
+        responseText: TEST_ERROR_MESSAGE,
+        getResponseHeader: () => 'text/plain',
+      };
 
-    dropzone.processFile(TEST_FILE);
+      dropzone.processFile(TEST_FILE);
 
-    xhr.onload();
+      xhr.onload();
 
-    expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
+      expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
+    });
   });
 });