From 1182ad3c44175dcb691fa64df039222593a692ce Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Thu, 9 Jan 2025 13:28:20 +0100
Subject: [PATCH] Use htmx.onLoad to run initUploadFields when needed, then it
 can be added once in base.html.

---
 .../base_determination_form.html              |  1 -
 .../templates/funds/application_base.html     |  3 +-
 .../funds/applicationsubmission_form.html     |  3 +-
 .../funds/includes/delegated_form_base.html   |  1 -
 .../funds/includes/dialog_form_base.html      |  1 -
 .../includes/translate_application_form.html  |  1 -
 .../funds/includes/update_reviewer_form.html  |  1 -
 .../application_projects/invoice_form.html    |  4 ---
 .../modals/report_frequency_config.html       |  1 -
 .../project_approval_form.html                |  2 +-
 .../application_projects/project_form.html    |  4 ---
 .../application_projects/report_form.html     |  1 -
 .../templates/review/review_edit_form.html    |  1 -
 .../review/templates/review/review_form.html  |  1 -
 hypha/apply/stream_forms/fields.py            |  2 +-
 hypha/static_src/javascript/file-uploads.js   | 30 +++++++++++--------
 hypha/templates/base.html                     |  6 ++--
 17 files changed, 25 insertions(+), 38 deletions(-)

diff --git a/hypha/apply/determinations/templates/determinations/base_determination_form.html b/hypha/apply/determinations/templates/determinations/base_determination_form.html
index 95b811cc3d..9c30976016 100644
--- a/hypha/apply/determinations/templates/determinations/base_determination_form.html
+++ b/hypha/apply/determinations/templates/determinations/base_determination_form.html
@@ -86,7 +86,6 @@ <h2>{{ value }}</h2>
 {% endblock %}
 
 {% block extra_js %}
-    {{ form.media.js }}
     {{ field_blocks_ids|json_script:"block-ids" }}
     <script src="{% static 'js/determination-template.js' %}"></script>
 {% endblock %}
diff --git a/hypha/apply/funds/templates/funds/application_base.html b/hypha/apply/funds/templates/funds/application_base.html
index 3459ef23db..8865fd3ea8 100644
--- a/hypha/apply/funds/templates/funds/application_base.html
+++ b/hypha/apply/funds/templates/funds/application_base.html
@@ -60,7 +60,7 @@ <h3>{% blocktrans %}Sorry this {{ page|verbose_name }} is not accepting applicat
                         {% endif %}
                     {% endfor %}
 
-                {# Hidden fields needed e.g. for django-file-form. See `StreamBaseForm.hidden_fields` #}
+                    {# Hidden fields needed e.g. for django-file-form. See `StreamBaseForm.hidden_fields` #}
                     {% for hidden_field in form.hidden_fields %}
                         {{ hidden_field }}
                     {% endfor %}
@@ -85,7 +85,6 @@ <h3>{% blocktrans %}Sorry this {{ page|verbose_name }} is not accepting applicat
 {% endblock %}
 
 {% block extra_js %}
-    {{ form.media.js }}
     <script src="{% static 'js/application-form.js' %}"></script>
     <script src="{% static 'js/tinymce-word-count.js' %}"></script>
     <script src="{% static 'js/submission-form-copy.js' %}"></script>
diff --git a/hypha/apply/funds/templates/funds/applicationsubmission_form.html b/hypha/apply/funds/templates/funds/applicationsubmission_form.html
index 645d4940b7..35c30cbd6e 100644
--- a/hypha/apply/funds/templates/funds/applicationsubmission_form.html
+++ b/hypha/apply/funds/templates/funds/applicationsubmission_form.html
@@ -26,7 +26,7 @@
                     {% endif %}
                 {% endfor %}
 
-            {# Hidden fields needed e.g. for django-file-form. See `StreamBaseForm.hidden_fields` #}
+                {# Hidden fields needed e.g. for django-file-form. See `StreamBaseForm.hidden_fields` #}
                 {% for hidden_field in form.hidden_fields %}
                     {{ hidden_field }}
                 {% endfor %}
@@ -44,7 +44,6 @@
 {% endblock %}
 
 {% block extra_js %}
-    {{ form.media.js }}
     <script src="{% static 'js/application-form.js' %}"></script>
     <script src="{% static 'js/tinymce-word-count.js' %}"></script>
     <script src="{% static 'js/multi-input-fields.js' %}"></script>
diff --git a/hypha/apply/funds/templates/funds/includes/delegated_form_base.html b/hypha/apply/funds/templates/funds/includes/delegated_form_base.html
index 55a147953f..74cf5ed730 100644
--- a/hypha/apply/funds/templates/funds/includes/delegated_form_base.html
+++ b/hypha/apply/funds/templates/funds/includes/delegated_form_base.html
@@ -7,7 +7,6 @@
     {% if action %}action="{{ action }}"{% endif %}
 >
     {% csrf_token %}
-    {{ form.media.js }}
     {% for hidden in form.hidden_fields %}
         {{ hidden }}
     {% endfor %}
diff --git a/hypha/apply/funds/templates/funds/includes/dialog_form_base.html b/hypha/apply/funds/templates/funds/includes/dialog_form_base.html
index a4b496bb39..efc89dd3d9 100644
--- a/hypha/apply/funds/templates/funds/includes/dialog_form_base.html
+++ b/hypha/apply/funds/templates/funds/includes/dialog_form_base.html
@@ -10,7 +10,6 @@
     enctype="multipart/form-data"
 >
     {% csrf_token %}
-    {{ form.media.js }}
     {% for hidden in form.hidden_fields %}
         {{ hidden }}
     {% endfor %}
diff --git a/hypha/apply/funds/templates/funds/includes/translate_application_form.html b/hypha/apply/funds/templates/funds/includes/translate_application_form.html
index b5c9d7cb2f..f7552c8180 100644
--- a/hypha/apply/funds/templates/funds/includes/translate_application_form.html
+++ b/hypha/apply/funds/templates/funds/includes/translate_application_form.html
@@ -8,7 +8,6 @@
     hx-post="{{ request.path }}"
 >
     {% csrf_token %}
-    {{ form.media.js }}
     {% for hidden in form.hidden_fields %}
         {{ hidden }}
     {% endfor %}
diff --git a/hypha/apply/funds/templates/funds/includes/update_reviewer_form.html b/hypha/apply/funds/templates/funds/includes/update_reviewer_form.html
index b7e3ea256c..ad9536e521 100644
--- a/hypha/apply/funds/templates/funds/includes/update_reviewer_form.html
+++ b/hypha/apply/funds/templates/funds/includes/update_reviewer_form.html
@@ -9,7 +9,6 @@
     hx-post="{{ request.path }}"
 >
     {% csrf_token %}
-    {{ form.media.js }}
     {% for hidden in form.hidden_fields %}
         {{ hidden }}
     {% endfor %}
diff --git a/hypha/apply/projects/templates/application_projects/invoice_form.html b/hypha/apply/projects/templates/application_projects/invoice_form.html
index 7e9f299d45..74fe22f8e6 100644
--- a/hypha/apply/projects/templates/application_projects/invoice_form.html
+++ b/hypha/apply/projects/templates/application_projects/invoice_form.html
@@ -47,7 +47,3 @@
         </div>
     </div>
 {% endblock %}
-
-{% block extra_js %}
-    {{ form.media.js }}
-{% endblock %}
diff --git a/hypha/apply/projects/templates/application_projects/modals/report_frequency_config.html b/hypha/apply/projects/templates/application_projects/modals/report_frequency_config.html
index d571a8f793..a0c118523d 100644
--- a/hypha/apply/projects/templates/application_projects/modals/report_frequency_config.html
+++ b/hypha/apply/projects/templates/application_projects/modals/report_frequency_config.html
@@ -42,7 +42,6 @@
         enctype="multipart/form-data"
     >
         {% csrf_token %}
-        {{ form.media.js }}
         {% for hidden in form.hidden_fields %}
             {{ hidden }}
         {% endfor %}
diff --git a/hypha/apply/projects/templates/application_projects/project_approval_form.html b/hypha/apply/projects/templates/application_projects/project_approval_form.html
index c110d1731e..dad2d4310c 100644
--- a/hypha/apply/projects/templates/application_projects/project_approval_form.html
+++ b/hypha/apply/projects/templates/application_projects/project_approval_form.html
@@ -31,7 +31,7 @@
                         {% endif %}
                     {% endfor %}
 
-                {# Hidden fields needed e.g. for django-file-form. See `StreamBaseForm.hidden_fields` #}
+                    {# Hidden fields needed e.g. for django-file-form. See `StreamBaseForm.hidden_fields` #}
                     {% for hidden_field in pf_form.hidden_fields %}
                         {{ hidden_field }}
                     {% endfor %}
diff --git a/hypha/apply/projects/templates/application_projects/project_form.html b/hypha/apply/projects/templates/application_projects/project_form.html
index 338932cbcb..e3cedc53b3 100644
--- a/hypha/apply/projects/templates/application_projects/project_form.html
+++ b/hypha/apply/projects/templates/application_projects/project_form.html
@@ -36,7 +36,3 @@
         </div>
     </div>
 {% endblock %}
-
-{% block extra_js %}
-    {{ form.media.js }}
-{% endblock %}
diff --git a/hypha/apply/projects/templates/application_projects/report_form.html b/hypha/apply/projects/templates/application_projects/report_form.html
index c350b2837d..f3fb0103d8 100644
--- a/hypha/apply/projects/templates/application_projects/report_form.html
+++ b/hypha/apply/projects/templates/application_projects/report_form.html
@@ -76,6 +76,5 @@
 {% endblock %}
 
 {% block extra_js %}
-    {{ form.media.js }}
     <script src="{% static 'js/multi-input-fields.js' %}"></script>
 {% endblock %}
diff --git a/hypha/apply/review/templates/review/review_edit_form.html b/hypha/apply/review/templates/review/review_edit_form.html
index c287fe968b..81da09a48b 100644
--- a/hypha/apply/review/templates/review/review_edit_form.html
+++ b/hypha/apply/review/templates/review/review_edit_form.html
@@ -80,6 +80,5 @@ <h2>{{ value }}</h2>
 {% endblock %}
 
 {% block extra_js %}
-    {{ form.media.js }}
     <script src="{% static 'js/review-form-actions.js' %}"></script>
 {% endblock %}
diff --git a/hypha/apply/review/templates/review/review_form.html b/hypha/apply/review/templates/review/review_form.html
index 4c253a516d..1a4ccfea60 100644
--- a/hypha/apply/review/templates/review/review_form.html
+++ b/hypha/apply/review/templates/review/review_form.html
@@ -101,6 +101,5 @@ <h2>{{ value }}</h2>
 {% endblock %}
 
 {% block extra_js %}
-    {{ form.media.js }}
     <script src="{% static 'js/review-form-actions.js' %}"></script>
 {% endblock %}
diff --git a/hypha/apply/stream_forms/fields.py b/hypha/apply/stream_forms/fields.py
index 9a649c2511..de83426f22 100644
--- a/hypha/apply/stream_forms/fields.py
+++ b/hypha/apply/stream_forms/fields.py
@@ -20,7 +20,7 @@ def media(self):
                 ]
             },
             js=[
-                static("file_form/file_form.js"),
+                static("file_form/file_form.min.js"),
                 static("js/file-uploads.js"),
             ],
         )
diff --git a/hypha/static_src/javascript/file-uploads.js b/hypha/static_src/javascript/file-uploads.js
index 43dd62dfc8..9e10cdd880 100644
--- a/hypha/static_src/javascript/file-uploads.js
+++ b/hypha/static_src/javascript/file-uploads.js
@@ -1,26 +1,30 @@
-jQuery(function ($) {
+// We use htmx.onLoad() so it will initilise file uploads in htmx dialogs.
+htmx.onLoad(function () {
   // Initialize django-file-form
-  $("form")
-    .get()
-    .forEach(function (form) {
-      // Prevent initilising it multiple times and run it for forms
-      // that have a `form_id` field added by django-file-form.
-      if (!form.initUploadFieldsDone && form.querySelector("[name=form_id]")) {
-        init(form);
-        form.initUploadFieldsDone = true;
-      }
-    });
+  document.querySelectorAll("form").forEach(function (form) {
+    // Prevent initializing it multiple times and run it for forms
+    // that have a `form_id` field added by django-file-form.
+    if (!form.initUploadFieldsDone && form.querySelector("[name=form_id]")) {
+      init(form);
+      form.initUploadFieldsDone = true;
+    }
+  });
 
   /**
    * Initialize django-file-form for a form.
    * @param {object} form The form to initialize.
    */
   function init(form) {
-    if ($(".form__group--file").length) {
+    if (document.querySelectorAll(".form__group--file").length) {
       window.initUploadFields(form);
 
       // Hide wrapper elements for hidden inputs added by django-file-form
-      $("input[type=hidden]").closest(".form__group").hide();
+      document.querySelectorAll("input[type=hidden]").forEach(function (input) {
+        const closestFormGroup = input.closest(".form__group");
+        if (closestFormGroup) {
+          closestFormGroup.style.display = "none";
+        }
+      });
     }
   }
 });
diff --git a/hypha/templates/base.html b/hypha/templates/base.html
index 88f40f414b..f7dcde3a10 100644
--- a/hypha/templates/base.html
+++ b/hypha/templates/base.html
@@ -26,7 +26,7 @@
 
         <link rel="stylesheet" href="{% static 'css/tailwind-output.css' %}">
         <link rel="stylesheet" href="{% static 'css/main.css' %}">
-        <!-- Load any form css -->
+        <!-- Needed for most forms so load it here once. -->
         {{ form.media.css }}
         {% block extra_css %}{% endblock %}
         <link rel="stylesheet" href="{% static 'css/print.css' %}" media="print">
@@ -123,7 +123,7 @@
         </script>
         <!-- htmx end -->
 
-        <!-- Placeholder for the htmx modal & toast-->
+        <!-- Placeholder for the htmx modal & toast -->
         {% include "includes/_modal-placeholder.html" %}
         {% include "includes/_toast-placeholder.html" %}
 
@@ -131,6 +131,8 @@
         <!-- Please do not add new features that require jQuery! -->
         <script src="{% static 'js/vendor/jquery.min.js' %}"></script>
 
+        <!-- Needed for most forms so load it here once. -->
+        {{ form.media.js }}
         {% block extra_js %}{% endblock %}
 
         {% block sentry_sdk %}