Move ajaxifyDocumentUploadForm logic into the base ChooserModalOnLoadHandlerFactory

client/src/entrypoints/documents/document-chooser-modal.js

@@ -1,26 +1,6 @@
 import $ from 'jquery';
 import { initTabs } from '../../includes/tabs';
-import {
-  submitCreationForm,
-  initPrefillTitleFromFilename,
-  ChooserModalOnloadHandlerFactory,
-} from '../../includes/chooserModal';
-
-function ajaxifyDocumentUploadForm(modal) {
-  $('form.document-upload', modal.body).on('submit', (event) => {
-    submitCreationForm(modal, event.currentTarget, {
-      errorContainerSelector: '#tab-upload',
-    });
-
-    return false;
-  });
-
-  initPrefillTitleFromFilename(modal, {
-    fileFieldSelector: '#id_document-chooser-upload-file',
-    titleFieldSelector: '#id_document-chooser-upload-title',
-    eventName: 'wagtail:documents-upload',
-  });
-}
+import { ChooserModalOnloadHandlerFactory } from '../../includes/chooserModal';
 
 class DocumentChooserModalOnloadHandlerFactory extends ChooserModalOnloadHandlerFactory {
   ajaxifyLinks(modal, context) {
@@ -40,17 +20,16 @@ class DocumentChooserModalOnloadHandlerFactory extends ChooserModalOnloadHandler
     initTabs();
   }
 
-  onLoadChooseStep(modal, jsonData) {
-    super.onLoadChooseStep(modal, jsonData);
-    ajaxifyDocumentUploadForm(modal);
+  onLoadReshowCreationFormStep(modal, jsonData) {
+    $('#tab-upload', modal.body).replaceWith(jsonData.htmlFragment);
+    initTabs();
+    this.ajaxifyCreationForm(modal);
   }
 
   getOnLoadHandlers() {
     const handlers = super.getOnLoadHandlers();
     handlers.reshow_upload_form = (modal, jsonData) => {
-      $('#tab-upload', modal.body).replaceWith(jsonData.htmlFragment);
-      initTabs();
-      ajaxifyDocumentUploadForm(modal);
+      this.onLoadReshowCreationFormStep(modal, jsonData);
     };
     return handlers;
   }
@@ -61,4 +40,9 @@ window.DOCUMENT_CHOOSER_MODAL_ONLOAD_HANDLERS =
     searchFilterSelectors: ['#collection_chooser_collection_id'],
     searchInputDelay: 50,
     chosenResponseName: 'documentChosen',
+    creationFormSelector: 'form.document-upload',
+    creationFormErrorContainerSelector: '#tab-upload',
+    creationFormFileFieldSelector: '#id_document-chooser-upload-file',
+    creationFormTitleFieldSelector: '#id_document-chooser-upload-title',
+    creationFormEventName: 'wagtail:documents-upload',
   }).getOnLoadHandlers();

client/src/includes/chooserModal.js

@@ -55,19 +55,22 @@ const initPrefillTitleFromFilename = (
 
       // allow an event handler to customise data or call event.preventDefault to stop any title pre-filling
       const form = fileWidget.closest('form').get(0);
-      const event = form.dispatchEvent(
-        new CustomEvent(eventName, {
-          bubbles: true,
-          cancelable: true,
-          detail: {
-            data: data,
-            filename: filename,
-            maxTitleLength: maxTitleLength,
-          },
-        }),
-      );
 
-      if (!event) return; // do not set a title if event.preventDefault(); is called by handler
+      if (eventName) {
+        const event = form.dispatchEvent(
+          new CustomEvent(eventName, {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+              data: data,
+              filename: filename,
+              maxTitleLength: maxTitleLength,
+            },
+          }),
+        );
+
+        if (!event) return; // do not set a title if event.preventDefault(); is called by handler
+      }
 
       titleWidget.val(data.title);
     }
@@ -161,6 +164,13 @@ class ChooserModalOnloadHandlerFactory {
     ];
     this.chosenResponseName = opts?.chosenResponseName || 'chosen';
     this.searchInputDelay = opts?.searchInputDelay || 200;
+    this.creationFormSelector =
+      opts?.creationFormSelector || 'form[data-chooser-modal-create]';
+    this.creationFormErrorContainerSelector =
+      opts?.creationFormErrorContainerSelector || '#tab-create';
+    this.creationFormFileFieldSelector = opts?.creationFormFileFieldSelector;
+    this.creationFormTitleFieldSelector = opts?.creationFormTitleFieldSelector;
+    this.creationFormEventName = opts?.creationFormEventName;
 
     this.searchController = null;
   }
@@ -183,6 +193,29 @@ class ChooserModalOnloadHandlerFactory {
     });
   }
 
+  ajaxifyCreationForm(modal) {
+    /* Convert the creation form to an AJAX submission */
+    $(this.creationFormSelector, modal.body).on('submit', (event) => {
+      submitCreationForm(modal, event.currentTarget, {
+        errorContainerSelector: this.creationFormErrorContainerSelector,
+      });
+
+      return false;
+    });
+
+    /* If this form has a file and title field, set up the title to be prefilled from the title */
+    if (
+      this.creationFormFileFieldSelector &&
+      this.creationFormTitleFieldSelector
+    ) {
+      initPrefillTitleFromFilename(modal, {
+        fileFieldSelector: this.creationFormFileFieldSelector,
+        titleFieldSelector: this.creationFormTitleFieldSelector,
+        eventName: this.creationFormEventName,
+      });
+    }
+  }
+
   initSearchController(modal) {
     this.searchController = new SearchController({
       form: $(this.searchFormSelector, modal.body),
@@ -204,6 +237,7 @@ class ChooserModalOnloadHandlerFactory {
   onLoadChooseStep(modal) {
     this.initSearchController(modal);
     this.ajaxifyLinks(modal, modal.body);
+    this.ajaxifyCreationForm(modal);
   }
 
   onLoadChosenStep(modal, jsonData) {