Required file field behaviour in stream field forms (#4457)

Fixes #4401

Author: sandeepsajan0

hypha/apply/stream_forms/fields.py

@@ -1,4 +1,5 @@
 from django.conf import settings
+from django.core.exceptions import ValidationError
 from django.core.validators import FileExtensionValidator
 from django.forms import FileField
 from django_file_form.fields import MultipleUploadedFileField, UploadedFileField
@@ -13,6 +14,8 @@ class MultiFileField(MultipleUploadedFileField):
     widget = MultiFileFieldWidget
 
     def clean(self, value, initial):
+        if self.required and not value:
+            raise ValidationError(self.error_messages["required"], code="required")
         if not value:
             return []
         old_files = [
@@ -56,6 +59,8 @@ class SingleFileField(UploadedFileField):
     widget = SingleFileFieldWidget
 
     def clean(self, value, initial):
+        if self.required and not value and not initial:
+            raise ValidationError(self.error_messages["required"], code="required")
         if not value:
             return
         if hasattr(value, "is_placeholder") and value.is_placeholder and initial:

hypha/static_src/javascript/file-uploads.js

@@ -27,4 +27,39 @@ htmx.onLoad(function () {
       });
     }
   }
+
+  // Handle client side validation for required file fields
+  let fileInputs = document.querySelectorAll("input[type='file'][required]");
+
+  fileInputs.forEach((input) => {
+    input.addEventListener("invalid", function (event) {
+      event.preventDefault(); // Prevent default browser behavior
+
+      let errorMessage = "This field is required.";
+      // Find the closest dff-uploader wrapper and display an error
+      let container = input.closest(".form__item");
+
+      let errorDiv = container.querySelector(".form__error-text");
+
+      errorDiv = document.createElement("p");
+      errorDiv.classList.add("form__error-text");
+      container.appendChild(errorDiv);
+      errorDiv.innerText = errorMessage; // Show error message
+    });
+
+    input.addEventListener("change", function () {
+      let container = input.closest(".form__item");
+      let errorDiv = container.querySelector(".form__error-text");
+
+      if (errorDiv) {
+        if (
+          input.files.length > 0 ||
+          container.querySelector(".dff-file") !== null
+        ) {
+          errorDiv.classList.remove("form__error-text");
+          errorDiv.innerText = ""; // Clear the error only when a file is selected
+        }
+      }
+    });
+  });
 });