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,6 +13,19 @@ const TEMPLATE = `<form class="gfm-form" data-uploads-path="${TEST_UPLOAD_PATH}"
 </form>`;
 
 describe('dropzone_input', () => {
+  it('returns null when failed to initialize', () => {
+    const dropzone = dropzoneInput($('<form class="gfm-form"></form>'));
+
+    expect(dropzone).toBeNull();
+  });
+
+  it('returns valid dropzone when successfully initialize', () => {
+    const dropzone = dropzoneInput($(TEMPLATE));
+
+    expect(dropzone.version).toBeTruthy();
+  });
+
+  describe('shows error message', () => {
     let form;
     let dropzone;
     let xhr;
@@ -32,7 +45,7 @@ describe('dropzone_input', () => {
       window.XMLHttpRequest = oldXMLHttpRequest;
     });
 
-  it('shows error message, when AJAX fails with json', () => {
+    it('when AJAX fails with json', () => {
       xhr = {
         ...xhr,
         statusCode: 400,
@@ -48,7 +61,7 @@ describe('dropzone_input', () => {
       expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
     });
 
-  it('shows error message, when AJAX fails with text', () => {
+    it('when AJAX fails with text', () => {
       xhr = {
         ...xhr,
         statusCode: 400,
@@ -63,4 +76,5 @@ describe('dropzone_input', () => {
 
       expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
     });
+  });
 });