@gov-cy/govcy-express-services 1.0.0-alpha.2 → 1.0.0-alpha.20

package/src/middleware/govcyFileViewHandler.mjs

@@ -0,0 +1,161 @@
+import { getPageConfigData } from "../utils/govcyLoadConfigData.mjs";
+import { evaluatePageConditions } from "../utils/govcyExpressions.mjs";
+import { getEnvVariable, getEnvVariableBool } from "../utils/govcyEnvVariables.mjs";
+import { ALLOWED_FILE_MIME_TYPES } from "../utils/govcyConstants.mjs";
+import { govcyApiRequest } from "../utils/govcyApiRequest.mjs";
+import * as dataLayer from "../utils/govcyDataLayer.mjs";
+import { logger } from '../utils/govcyLogger.mjs';
+import { handleMiddlewareError } from "../utils/govcyUtils.mjs";
+import { isMagicByteValid, pageContainsFileInput } from "../utils/govcyHandleFiles.mjs";
+
+export function govcyFileViewHandler() {
+    return async (req, res, next) => {
+        try {
+            const { siteId, pageUrl, elementName } = req.params;
+
+            // Create a deep copy of the service to avoid modifying the original
+            let serviceCopy = req.serviceData;
+
+            // Get the download file configuration
+            const downloadCfg = serviceCopy?.site?.fileDownloadAPIEndpoint;
+            // Check if download file configuration is available
+            if (!downloadCfg?.url || !downloadCfg?.clientKey || !downloadCfg?.serviceId) {
+                return handleMiddlewareError(`File download APU configuration not found`, 404, next);
+            }
+
+            // Environment vars
+            const allowSelfSignedCerts = getEnvVariableBool("ALLOW_SELF_SIGNED_CERTIFICATES", false);
+            let url = getEnvVariable(downloadCfg.url || "", false);
+            const clientKey = getEnvVariable(downloadCfg.clientKey || "", false);
+            const serviceId = getEnvVariable(downloadCfg.serviceId || "", false);
+            const dsfGtwKey = getEnvVariable(downloadCfg?.dsfgtwApiKey || "", "");
+            const method = (downloadCfg?.method || "GET").toLowerCase();
+
+            // Check if the upload API is configured correctly
+            if (!url || !clientKey) {
+                return handleMiddlewareError(`Missing environment variables for upload`, 404, next);
+            }
+
+
+            // ⤵️ Find the current page based on the URL
+            const page = getPageConfigData(serviceCopy, pageUrl);
+
+            // deep copy the page template to avoid modifying the original
+            const pageTemplateCopy = JSON.parse(JSON.stringify(page.pageTemplate));
+
+            // ----- Conditional logic comes here
+            // ✅ Skip this POST handler if the page's conditions evaluate to true (redirect away)
+            // const conditionResult = evaluatePageConditions(page, req.session, siteId, req);
+            // if (conditionResult.result === false) {
+            //     logger.debug("⛔️ Page condition evaluated to true on POST — skipping form save and redirecting:", conditionResult);
+            //     return handleMiddlewareError(`Page condition evaluated to true on POST — skipping form save and redirecting`, 404, next);
+            // }
+
+            // Validate the field: Only allow delete if the page contains a fileInput with the given name
+            const fileInputElement = pageContainsFileInput(pageTemplateCopy, elementName);
+            if (!fileInputElement) {
+                return handleMiddlewareError(`File input [${elementName}] not allowed on this page`, 404, next);
+            }
+
+            //check the reference number
+            const referenceNo = dataLayer.getSiteLoadDataReferenceNumber(req.session, siteId);
+            if (!referenceNo) {
+                return handleMiddlewareError(`Missing submission reference number`, 404, next);
+            }
+
+            //get element data 
+            const elementData = dataLayer.getFormDataValue(req.session, siteId, pageUrl, elementName)
+
+            // If the element data is not found, return an error response
+            if (!elementData || !elementData?.sha256 || !elementData?.fileId) {
+                return handleMiddlewareError(`File input [${elementName}] data not found on this page`, 404, next);
+            }
+
+            // Construct the URL with tag being the elementName
+            url += `/${encodeURIComponent(referenceNo)}/${encodeURIComponent(elementData.fileId)}/${encodeURIComponent(elementData.sha256)}`;
+
+            // Get the user
+            const user = dataLayer.getUser(req.session);
+            // Perform the upload request
+            const response = await govcyApiRequest(
+                method,
+                url,
+                {},
+                true,
+                user,
+                {
+                    accept: "text/plain",
+                    "client-key": clientKey,
+                    "service-id": serviceId,
+                    ...(dsfGtwKey !== "" && { "dsfgtw-api-key": dsfGtwKey })
+                },
+                3,
+                allowSelfSignedCerts
+            );
+
+            // If not succeeded, handle error
+            if (!response?.Succeeded) {
+                return handleMiddlewareError(`fileDownloadAPIEndpoint returned succeeded false`, 500, next);
+            }
+
+            // Check if the response contains the expected data
+            if (!response?.Data?.contentType || !response?.Data?.fileName || !response?.Data?.base64) {
+                return handleMiddlewareError(`fileDownloadAPIEndpoint - Missing contentType, fileName or base64 in response data`, 500, next);
+            }
+
+            // Get filename
+            const filename = response?.Data?.fileName || "filename";
+            const fallbackFilename = asciiFallback(filename);
+            const utf8Filename = encodeRFC5987(filename);
+
+            // Decode base64 to binary
+            const fileBuffer = Buffer.from(response.Data.base64, 'base64');
+
+            // file type checks
+            // 1. Check declared mimetype
+            if (!ALLOWED_FILE_MIME_TYPES.includes(response?.Data?.contentType)) {
+                return handleMiddlewareError(`fileDownloadAPIEndpoint - Invalid file type (MIME not allowed)`, 500, next);
+            }
+
+            // 2. Check actual file content (magic bytes) matches claimed MIME type
+            if (!isMagicByteValid(fileBuffer, response?.Data?.contentType)) {
+                return handleMiddlewareError(`fileDownloadAPIEndpoint - Invalid file type (magic byte mismatch)`, 500, next);
+            }
+
+            // Check if Buffer is empty
+            if (!fileBuffer || fileBuffer.length === 0) {
+                return handleMiddlewareError(`fileDownloadAPIEndpoint - File is empty or invalid`, 500, next);
+            }
+            // Send the file to the browser
+            res.type(response?.Data?.contentType);
+            res.setHeader(
+                'Content-Disposition',
+                `inline; filename="${fallbackFilename}"; filename*=UTF-8''${utf8Filename}`
+            );
+            res.send(fileBuffer);
+
+        } catch (error) {
+            logger.error("Error in govcyViewFileHandler middleware:", error.message);
+            return next(error); // Pass the error to the next middleware
+        }
+    };
+}
+
+//------------------------------------------------------------------------------
+// Helper functions
+// rfc5987 encoding for filename*
+function encodeRFC5987(str) {
+    return encodeURIComponent(str)
+        .replace(/['()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase())
+        .replace(/%(7C|60|5E)/g, (m, p) => '%' + p); // | ` ^
+}
+
+// ASCII fallback for old browsers
+function asciiFallback(str) {
+    return str
+        .replace(/[^\x20-\x7E]/g, '')     // strip non-ASCII
+        .replace(/[/\\?%*:|"<>]/g, '-')   // reserved chars
+        .replace(/[\r\n]/g, ' ')          // drop newlines
+        .replace(/"/g, "'")               // no quotes
+        || 'download';
+}

package/src/middleware/govcyFormsPostHandler.mjs

@@ -43,7 +43,7 @@ export function govcyFormsPostHandler() {
             }
     
             // const formData = req.body; // Submitted data
-            const formData = getFormData(formElement.params.elements, req.body); // Submitted data
+            const formData = getFormData(formElement.params.elements, req.body, req.session, siteId, pageUrl); // Submitted data
 
             // ☑️ Start validation from top-level form elements
             const validationErrors = validateFormElements(formElement.params.elements, formData);

package/src/middleware/govcyHttpErrorHandler.mjs

@@ -3,6 +3,8 @@ import * as govcyResources from "../resources/govcyResources.mjs";
 import * as dataLayer from "../utils/govcyDataLayer.mjs";
 import { logger } from "../utils/govcyLogger.mjs";
 import { whatsIsMyEnvironment } from '../utils/govcyEnvVariables.mjs';
+import { errorResponse } from '../utils/govcyApiResponse.mjs';
+import { isApiRequest } from '../utils/govcyApiDetection.mjs';
 
 /**
  * Middleware function to handle HTTP errors and render appropriate error pages.
@@ -49,9 +51,8 @@ export function govcyHttpErrorHandler(err, req, res, next) {
 
     res.status(statusCode);
 
-    // Return JSON if the request expects it
-    if (req.headers.accept && req.headers.accept.includes("application/json")) {
-        return res.json({ error: message });
+    if (isApiRequest(req)) {
+        return res.status(statusCode).json(errorResponse(statusCode, message));
     }
 
     // Render an error page for non-JSON requests

package/src/middleware/govcyPDFRender.mjs

@@ -6,6 +6,7 @@ import { logger } from "../utils/govcyLogger.mjs";
  * Middleware function to render PDFs using the GovCy Frontend Renderer.
  * This function takes the processed page data and template, and generates the final PDF response.
  */
+/* c8 ignore start */
 export function govcyPDFRender() {
     return async (req, res) => {
         try {
@@ -29,4 +30,5 @@ export function govcyPDFRender() {
             res.status(500).send('Unable to generate PDF at this time.');
         }
     };
-}
+}
+/* c8 ignore end */

package/src/middleware/govcyPageHandler.mjs

@@ -53,8 +53,7 @@ export function govcyPageHandler() {
             element.params.method = "POST";
             // ➕ Add CSRF token
             element.params.elements.push(govcyResources.csrfTokenInput(req.csrfToken()));
-            element.params.elements.push(govcyResources.staticResources.elements["govcyFormsJs"]);
-
+            
             // 🔍 Find the first button with `prototypeNavigate`
             const button = element.params.elements.find(subElement =>
               // subElement.element === "button" && subElement.params.prototypeNavigate
@@ -88,7 +87,7 @@ export function govcyPageHandler() {
             }
             //--------- End of Handle Validation Errors ---------
             
-            populateFormData(element.params.elements, theData,validationErrors);
+            populateFormData(element.params.elements, theData,validationErrors, req.session, siteId, pageUrl, req.globalLang, null, req.query.route);
             // if there are validation errors, add an error summary
             if (validationErrors?.errorSummary?.length > 0) {
               element.params.elements.unshift(govcyResources.errorSummary(validationErrors.errorSummary));
@@ -117,3 +116,4 @@ export function govcyPageHandler() {
     }
   };
 }
+

package/src/middleware/govcyPageRender.mjs

@@ -1,4 +1,5 @@
 import { govcyFrontendRenderer } from "@gov-cy/govcy-frontend-renderer";
+import * as govcyResources from "../resources/govcyResources.mjs";
 
 /**
  * Middleware function to render pages using the GovCy Frontend Renderer.
@@ -6,8 +7,17 @@ import { govcyFrontendRenderer } from "@gov-cy/govcy-frontend-renderer";
  */
 export function renderGovcyPage() {
     return (req, res) => {
+        const afterBody = {
+            name: "afterBody",
+            elements: [ 
+                govcyResources.staticResources.elements["govcyLoadingOverlay"],
+                govcyResources.staticResources.elements["govcyFormsJs"]
+            ]
+        };
+        // Initialize the renderer
         const renderer = new govcyFrontendRenderer();
         const { processedPage } = req;
+        processedPage.pageTemplate.sections.push(afterBody);
         const html = renderer.renderFromJSON(processedPage.pageTemplate, processedPage.pageData);
         res.send(html);
     };

package/src/middleware/govcyReviewPageHandler.mjs

@@ -79,7 +79,10 @@ export function govcyReviewPageHandler() {
             //--------- End Handle Validation Errors ---------
 
             // Add elements to the main section, the H1, summary list, the submit button and the JS
-            mainElements.push(pageH1, summaryList, submitButton, govcyResources.staticResources.elements["govcyFormsJs"]);
+            mainElements.push(pageH1, 
+                summaryList, 
+                submitButton
+            );
             // Append generated summary list to the page template
             pageTemplate.sections.push({ name: "main", elements: mainElements });
             

package/src/middleware/govcyReviewPostHandler.mjs

@@ -118,7 +118,7 @@ export function govcyReviewPostHandler() {
                         
                     //-- Send email to user
                     // Generate the email body
-                    let emailBody = generateSubmitEmail(service, submissionData.print_friendly_data, referenceNo, req);
+                    let emailBody = generateSubmitEmail(service, submissionData.printFriendlyData, referenceNo, req);
                     logger.debug("Email generated:", emailBody);
                     // Send the email
                     sendEmail(service.site.title[service.site.lang],emailBody,[dataLayer.getUser(req.session).email], "eMail").catch(err => {

package/src/middleware/govcySuccessPageHandler.mjs

@@ -78,7 +78,7 @@ export function govcySuccessPageHandler(isPDF = false) {
                 }   
             }
 
-            let summaryList = submissionData.renderer_data;
+            let summaryList = submissionData.rendererData;
 
             let mainElements = [];
             // Add elements to the main section
@@ -87,8 +87,7 @@ export function govcySuccessPageHandler(isPDF = false) {
                 weHaveSendYouAnEmail, 
                 pdfLink,
                 theDataFromYourRequest, 
-                summaryList, 
-                govcyResources.staticResources.elements["govcyFormsJs"]
+                summaryList
             );
             // Append generated summary list to the page template
             pageTemplate.sections.push({ name: "main", elements: mainElements });

package/src/public/js/govcyFiles.js

@@ -0,0 +1,299 @@
+// 🔍 Select all file inputs that have the .govcy-file-upload class
+var fileInputs = document.querySelectorAll('input[type="file"].govcy-file-upload');
+
+// select overlay and app root elements
+var _govcyOverlay = document.getElementById("govcy--loadingOverlay");
+var _govcyAppRoot = document.getElementById("govcy--body");
+
+// Accessibility: Keep track of previously focused element and disabled elements
+var _govcyPrevFocus = null;
+var _govcyDisabledEls = [];
+
+// 🔁 Loop over each file input and attach a change event listener
+fileInputs.forEach(function(input) {
+  input.addEventListener('change', _uploadFileEventHandler);
+});
+
+/**
+ * Disables all focusable elements within a given root element
+ * @param {*} root  The root element whose focusable children will be disabled
+ */
+function disableFocusables(root) {
+    var sel = 'a[href],area[href],button,input,select,textarea,iframe,summary,[contenteditable="true"],[tabindex]:not([tabindex="-1"])';
+    var nodes = root.querySelectorAll(sel);
+    _govcyDisabledEls = [];
+    for (var i = 0; i < nodes.length; i++) {
+        var el = nodes[i];
+        if (_govcyOverlay.contains(el)) continue;                 // don’t disable overlay itself
+        var prev = el.getAttribute('tabindex');
+        el.setAttribute('data-prev-tabindex', prev === null ? '' : prev);
+        el.setAttribute('tabindex', '-1');
+        _govcyDisabledEls.push(el);
+    }
+    root.setAttribute('aria-hidden', 'true');              // hide from AT on fallback
+    root.setAttribute('aria-busy', 'true');
+}
+
+/**
+ * Restores all focusable elements within a given root element
+ * @param {*} root  The root element whose focusable children will be restored
+ */
+function restoreFocusables(root) {
+    for (var i = 0; i < _govcyDisabledEls.length; i++) {
+        var el = _govcyDisabledEls[i];
+        var prev = el.getAttribute('data-prev-tabindex');
+        if (prev === '') el.removeAttribute('tabindex'); else el.setAttribute('tabindex', prev);
+        el.removeAttribute('data-prev-tabindex');
+    }
+    _govcyDisabledEls = [];
+    root.removeAttribute('aria-hidden');
+    root.removeAttribute('aria-busy');
+}
+
+/**
+ * Traps tab key navigation within the overlay
+ * @param {*} e The event
+ * @returns 
+ */
+function trapTab(e) {
+    if (e.key !== 'Tab') return;
+    var focusables = _govcyOverlay.querySelectorAll('a[href],button,input,select,textarea,[tabindex]:not([tabindex="-1"])');
+    if (focusables.length === 0) { e.preventDefault(); _govcyOverlay.focus(); return; }
+    var first = focusables[0], last = focusables[focusables.length - 1];
+    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+}
+
+/**
+ * Shows the loading spinner overlay and traps focus within it
+ */
+function showLoadingSpinner() {
+    _govcyPrevFocus = document.activeElement;
+    _govcyOverlay.setAttribute('aria-hidden', 'false');
+    _govcyOverlay.setAttribute('tabindex', '-1');
+    _govcyOverlay.style.display = 'flex';
+    document.documentElement.style.overflow = 'hidden';
+
+    if ('inert' in HTMLElement.prototype) {               // progressive enhancement
+        _govcyAppRoot.inert = true;
+    } else {
+        disableFocusables(_govcyAppRoot);
+        document.addEventListener('keydown', trapTab, true);
+    }
+    _govcyOverlay.focus();
+}
+
+/**
+ * Hides the loading spinner overlay and restores focus to the previously focused element
+ */
+function hideLoadingSpinner() {
+    _govcyOverlay.style.display = 'none';
+    _govcyOverlay.setAttribute('aria-hidden', 'true');
+    document.documentElement.style.overflow = '';
+
+    if ('inert' in HTMLElement.prototype) {
+        _govcyAppRoot.inert = false;
+    } else {
+        restoreFocusables(_govcyAppRoot);
+        document.removeEventListener('keydown', trapTab, true);
+    }
+    if (_govcyPrevFocus && _govcyPrevFocus.focus) _govcyPrevFocus.focus();
+}
+
+
+/**
+ * Handles the upload of a file event
+ *
+ * @param {object} event The event
+ */
+function _uploadFileEventHandler(event) {
+  var input = event.target;
+  var messages = {
+    "uploadSuccesful": {
+      "el": "Το αρχείο ανεβαστηκε",
+      "en": "File uploaded successfully",
+      "tr": "File uploaded successfully"
+    },
+    "uploadFailed": {
+      "el": "Αποτυχια ανεβασης",
+      "en": "File upload failed",
+      "tr": "File upload failed"
+    },
+    "uploadFailed406": {
+      "el": "Το επιλεγμένο αρχείο είναι κενό",
+      "en": "The selected file is empty",
+      "tr": "The selected file is empty"
+    },
+    "uploadFailed407": {
+      "el": "Το επιλεγμένο αρχείο πρέπει να είναι JPG, JPEG, PNG ή PDF",
+      "en": "The selected file must be a JPG, JPEG, PNG or PDF",
+      "tr": "The selected file must be a JPG, JPEG, PNG or PDF"
+    },
+    "uploadFailed408": {
+      "el": "Το επιλεγμένο αρχείο πρέπει να είναι JPG, JPEG, PNG ή PDF",
+      "en": "The selected file must be a JPG, JPEG, PNG or PDF",
+      "tr": "The selected file must be a JPG, JPEG, PNG or PDF"
+    },
+    "uploadFailed409": {
+      "el": "Το επιλεγμένο αρχείο πρέπει να είναι μικρότερο από 4MB",
+      "en": "The selected file must be smaller than 4MB",
+      "tr": "The selected file must be smaller than 4MB"
+    }
+  };
+
+  // 🔐 Get the CSRF token from a hidden input field (generated by your backend)
+  var csrfEl = document.querySelector('input[type="hidden"][name="_csrf"]');
+  var csrfToken = csrfEl ? csrfEl.value : '';
+
+  // 🔧 Define siteId and pageUrl (you can dynamically extract these later)
+  var siteId = window._govcySiteId || "";
+  var pageUrl = window._govcyPageUrl || "";
+  var lang = window._govcyLang || "el";
+
+  // 📦 Grab the selected file
+  var file = event.target.files[0];
+  var elementName = input.name; // Form field's `name` attribute
+  var elementId = input.id;     // Form field's `id` attribute
+
+  if (!file) return; // Exit if no file was selected
+
+  // Show loading spinner
+  showLoadingSpinner();
+
+  // 🧵 Prepare form-data payload for the API
+  var formData = new FormData();
+  formData.append('file', file);               // Attach the actual file
+  formData.append('elementName', elementName); // Attach the field name for backend lookup
+
+  // 🚀 CHANGED: using fetch instead of axios.post
+  fetch(`/apis/${siteId}/${pageUrl}/upload`, {
+    method: "POST",
+    headers: {
+      "X-CSRF-Token": csrfToken // 🔐 Pass CSRF token in custom header
+    },
+    body: formData
+  })
+    .then(function(response) {
+      // 🚀 CHANGED: fetch does not auto-throw on error codes → check manually
+      if (!response.ok) {
+        return response.json().then(function(errData) {
+          throw { response: { data: errData } };
+        });
+      }
+      return response.json();
+    })
+    .then(function(data) {
+      // ✅ Success response
+      var sha256 = data.Data.sha256;
+      var fileId = data.Data.fileId;
+
+      // 📝 Store returned metadata in hidden fields if needed
+      // document.querySelector('[name="' + elementName + 'Attachment[fileId]"]').value = fileId;
+      // document.querySelector('[name="' + elementName + 'Attachment[sha256]"]').value = sha256;
+      
+      // Hide loading spinner
+      hideLoadingSpinner();
+
+      // Render the file view
+      _renderFileElement("fileView", elementId, elementName, fileId, sha256, null);
+
+      // Accessibility: Update ARIA live region with success message
+      var statusRegion = document.getElementById('_govcy-upload-status');
+      if (statusRegion) {
+        setTimeout(function() {
+          statusRegion.textContent = messages.uploadSuccesful[lang];
+        }, 200);
+        setTimeout(function() {
+          statusRegion.textContent = '';
+        }, 5000);
+      }
+    })
+    .catch(function(err) {
+      // ⚠️ Show an error message if upload fails
+      var errorMessage = messages.uploadFailed;
+      var errorCode = err && err.response && err.response.data && err.response.data.ErrorCode;
+
+      if (errorCode === 406 || errorCode === 407 || errorCode === 408 || errorCode === 409) {
+        errorMessage = messages["uploadFailed" + errorCode];
+      }
+
+      // Hide loading spinner
+      hideLoadingSpinner();
+      // Render the file input with error
+      _renderFileElement("fileInput", elementId, elementName, "", "", errorMessage);
+
+      // Re-bind the file input's change handler
+      var newInput = document.getElementById(elementId);
+      if (newInput) {
+        newInput.addEventListener('change', _uploadFileEventHandler);
+      }
+
+      // Accessibility: Focus on the form field
+      document.getElementById(elementId)?.focus();
+    });
+}
+
+
+/**
+ * Renders a file element in the DOM
+ * 
+ * @param {string} elementState The element state. Can be "fileInput" or "fileView" 
+ * @param {string} elementId The element id
+ * @param {string} elementName The element name 
+ * @param {string} fileId The file id 
+ * @param {string} sha256 The sha256 
+ * @param {object} errorMessage The error message in all supported languages 
+ */
+function _renderFileElement(elementState, elementId, elementName, fileId, sha256, errorMessage) {
+  
+  // Grab the query string part (?foo=bar&route=something)
+  var queryString = window.location.search;
+  // Parse it
+  var params = new URLSearchParams(queryString);
+  // Get the "route" value (null if not present)
+  var route = params.get("route");
+
+  // Create an instance of GovcyFrontendRendererBrowser
+  var renderer = new GovcyFrontendRendererBrowser();
+  var lang = window._govcyLang || "el";
+  // Define the input data
+  var inputData =
+  {
+    "site": {
+      "lang": lang
+    }
+  };
+  var fileInputMap =  JSON.parse(JSON.stringify(window._govcyFileInputs));
+  var fileElement = fileInputMap[elementName];
+  fileElement.element = elementState;
+  if (errorMessage != null) fileElement.params.error = errorMessage;
+  if (fileId != null) fileElement.params.fileId = fileId;
+  if (sha256 != null) fileElement.params.sha256 = sha256;
+  if (elementState == "fileView") {
+    fileElement.params.visuallyHiddenText = fileElement.params.label;
+    // TODO: Also need to set the `view` and `download` URLs 
+    fileElement.params.viewHref = "/" + window._govcySiteId + "/" + window._govcyPageUrl + "/view-file/" + elementName;
+    fileElement.params.viewTarget = "_blank";
+    fileElement.params.deleteHref  = "/" + window._govcySiteId + "/" + window._govcyPageUrl + "/delete-file/" + elementName 
+      + (route !== null ? "?route=" + encodeURIComponent(route) : "");
+  }
+  // Construct the JSONTemplate
+  var JSONTemplate = {
+    "elements": [fileElement]
+  };
+  
+  //render HTML into string
+  var renderedHtml = renderer.renderFromJSON(JSONTemplate,inputData);
+  var outerElement = document.getElementById(`${elementId}-outer-control`) 
+        || document.getElementById(`${elementId}-input-control`) 
+        || document.getElementById(`${elementId}-view-control`);
+
+  if (outerElement) {
+    //remove all classes from outerElement
+    outerElement.className = "";
+    //set the id of the outerElement to `${elementId}-outer-control`
+    outerElement.id = `${elementId}-outer-control`;
+    //update DOM and initialize the JS components
+    renderer.updateDOMAndInitialize(`${elementId}-outer-control`, renderedHtml);
+  }
+}

package/src/public/js/govcyForms.js

@@ -1,20 +1,31 @@
 document.addEventListener("DOMContentLoaded", function () {
     // --- Show conditionals for checked radios ---
-    document.querySelectorAll('.govcy-radio-input[data-aria-controls]:checked').forEach(radio => {
-        const targetId = radio.getAttribute('data-aria-controls');
-        const targetElement = document.getElementById(targetId);
+    // CHANGED: NodeList.prototype.forEach is not in IE11 → use Array.prototype.forEach.call
+    // CHANGED: Arrow function → function
+    Array.prototype.forEach.call(
+        document.querySelectorAll('.govcy-radio-input[data-aria-controls]:checked'),
+        function (radio) { // CHANGED: arrow → function
+            // CHANGED: const → var (ES5)
+            var targetId = radio.getAttribute('data-aria-controls');
+            var targetElement = document.getElementById(targetId);
 
-        if (targetElement) {
-            targetElement.classList.remove('govcy-radio__conditional--hidden');
+            if (targetElement) {
+                targetElement.classList.remove('govcy-radio__conditional--hidden');
+            }
         }
-    });
+    );
+
     // --- Disable submit button after form submission ---
-    document.querySelectorAll('form').forEach(form => {
+    // CHANGED: NodeList.forEach → Array.prototype.forEach.call
+    Array.prototype.forEach.call(document.querySelectorAll('form'), function (form) { // CHANGED
         form.addEventListener('submit', function (e) {
-            const submitButton = form.querySelector('[type="submit"]');
+            // CHANGED: const → var (ES5)
+            var submitButton = form.querySelector('[type="submit"]');
             if (submitButton) {
                 submitButton.disabled = true;
                 submitButton.setAttribute('aria-disabled', 'true');
+                // (Optional) announce busy state for AT:
+                // submitButton.setAttribute('aria-busy', 'true'); // CHANGED: optional a11y improvement
             }
         });
     });