@gov-cy/govcy-express-services 1.0.0-alpha.6 → 1.0.0-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gov-cy/govcy-express-services",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.8",
   "description": "An Express-based system that dynamically renders services using @gov-cy/govcy-frontend-renderer and posts data to a submission API.",
   "author": "DMRID - DSF Team",
   "license": "MIT",

package/src/index.mjs

@@ -129,6 +129,14 @@ export default function initializeGovCyExpressService(){
 
   // 📝 -- ROUTE: Serve manifest.json dynamically for each site
   app.get('/:siteId/manifest.json', serviceConfigDataMiddleware, govcyManifestHandler());
+
+  // 🗃️ -- ROUTE: Handle POST requests for file uploads for a page. 
+  app.post('/apis/:siteId/:pageUrl/upload', 
+    serviceConfigDataMiddleware, 
+    requireAuth, // UNCOMMENT 
+    naturalPersonPolicy, // UNCOMMENT 
+    govcyServiceEligibilityHandler(true), // UNCOMMENT 
+    govcyUploadMiddleware);
   
   // 🏠 -- ROUTE: Handle route with only siteId (/:siteId or /:siteId/)
   app.get('/:siteId', serviceConfigDataMiddleware, requireAuth, naturalPersonPolicy, govcyServiceEligibilityHandler(true),govcyLoadSubmissionData(),govcyPageHandler(), renderGovcyPage());
@@ -148,14 +156,6 @@ export default function initializeGovCyExpressService(){
   // 📥 -- ROUTE: Handle POST requests for review page. The `submit` action
   app.post('/:siteId/review', serviceConfigDataMiddleware, requireAuth, naturalPersonPolicy, govcyServiceEligibilityHandler(), govcyReviewPostHandler());
   
-  // 🗃️ -- ROUTE: Handle POST requests for file uploads for a page. 
-  app.post('/:siteId/:pageUrl/upload', 
-    serviceConfigDataMiddleware, 
-    requireAuth, // UNCOMMENT 
-    naturalPersonPolicy, // UNCOMMENT 
-    govcyServiceEligibilityHandler(true), // UNCOMMENT 
-    govcyUploadMiddleware);
-  
   // 👀📥 -- ROUTE: Handle POST requests (Form Submissions) based on siteId and pageUrl, using govcyFormsPostHandler middleware
   app.post('/:siteId/:pageUrl', serviceConfigDataMiddleware, requireAuth, naturalPersonPolicy, govcyServiceEligibilityHandler(true), govcyFormsPostHandler());
   

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/govcyPageHandler.mjs

@@ -53,6 +53,9 @@ export function govcyPageHandler() {
             element.params.method = "POST";
             // ➕ Add CSRF token
             element.params.elements.push(govcyResources.csrfTokenInput(req.csrfToken()));
+            // // ➕ Add siteId and pageUrl to form data
+            // element.params.elements.push(govcyResources.siteAndPageInput(siteId, pageUrl, req.globalLang));
+            // ➕ Add govcyFormsJs script to the form
             element.params.elements.push(govcyResources.staticResources.elements["govcyFormsJs"]);
 
             // 🔍 Find the first button with `prototypeNavigate`
@@ -88,7 +91,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);
             // if there are validation errors, add an error summary
             if (validationErrors?.errorSummary?.length > 0) {
               element.params.elements.unshift(govcyResources.errorSummary(validationErrors.errorSummary));

package/src/middleware/govcyUpload.mjs

@@ -28,7 +28,7 @@ export const govcyUploadMiddleware = [
 
         if (result.status !== 200) {
             logger.error("Upload failed", result);
-            return res.status(result.status).json(errorResponse(result.status, result.errorMessage || 'File upload failed'));
+            return res.status(result.status).json(errorResponse(result.dataStatus, result.errorMessage || 'File upload failed'));
         }
 
         return res.json(successResponse(result.data));

package/src/public/js/govcyFiles.js

@@ -1,46 +1,175 @@
 // 🔍 Select all file inputs that have the .govcy-file-upload class
-const fileInputs = document.querySelectorAll('input[type="file"].govcy-file-upload');
+var fileInputs = document.querySelectorAll('input[type="file"].govcy-file-upload');
 
-// 🔐 Get the CSRF token from a hidden input field (generated by your backend)
-const csrfToken = document.querySelector('input[type="hidden"][name="_csrf"]')?.value;
+// 🔁 Loop over each file input and attach a change event listener
+fileInputs.forEach(function(input) {
+  input.addEventListener('change', _uploadFileEventHandler);
+});
 
-// 🔧 Define siteId and pageUrl (you can dynamically extract these later)
-const siteId = 'test';
-const pageUrl = 'data-entry-all';
 
-// 🔁 Loop over each file input and attach a change event listener
-fileInputs.forEach(input => {
-  input.addEventListener('change', async (event) => {
+/**
+ * Handles the upload of a file event
+ * 
+ * @param {object} event The event
+ */
+async 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": "Το επιλεγμένο αρχείο πρέπει να είναι μικρότερο από 5MB",
+        "en": "The selected file must be smaller than 5MB",
+        "tr": "The selected file must be smaller than 5MB"
+      }
+    };
+    // 🔐 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
-    const file = event.target.files[0];
-    const elementName = input.name; // Form field's `name` attribute
+    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
 
     // 🧵 Prepare form-data payload for the API
-    const formData = new FormData();
+    var formData = new FormData();
     formData.append('file', file);                  // Attach the actual file
     formData.append('elementName', elementName);    // Attach the field name for backend lookup
 
     try {
       // 🚀 Send file to the backend upload API
-      const response = await axios.post(`/${siteId}/${pageUrl}/upload`, formData, {
+      var response = await axios.post(`/apis/${siteId}/${pageUrl}/upload`, formData, {
         headers: {
           'X-CSRF-Token': csrfToken // 🔐 Pass CSRF token in custom header
         }
       });
 
-      const { sha256, fileId } = response.data.Data;
+      var sha256 = response.data.Data.sha256;
+      var fileId = response.data.Data.fileId;
 
       // 📝 Store returned metadata in hidden fields for submission with the form
-      document.querySelector(`[name="${elementName}Attachment[fileId]"`).value = fileId;
-      document.querySelector(`[name="${elementName}Attachment[sha256]"`).value = sha256;
+      // document.querySelector('[name="' + elementName + 'Attachment[fileId]"]').value = fileId;
+      // document.querySelector('[name="' + elementName + 'Attachment[sha256]"]').value = sha256;
 
-      alert('✅ File uploaded successfully');
+      // 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); 
+      }
+      // alert('✅ File uploaded successfully');
 
     } catch (err) {
       // ⚠️ Show an error message if upload fails
-      alert('❌ Upload failed: ' + (err.response?.data?.error || err.message));
+      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];
+      }
+
+      // 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) {
+  // 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 = 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 = "#viewHref";
+    fileElement.params.deleteHref  = "#deleteHref";
+  }
+  // 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/resources/govcyResources.mjs

@@ -100,6 +100,16 @@ export const staticResources = {
             en: "We have received your request. ",
             el: "Έχουμε λάβει την αίτησή σας. ",
             tr: "We have received your request. "
+        },
+        fileUploaded : {
+            en: "File has been uploaded. ",
+            el: "Το αρχείο ανεβάστηκε. ",
+            tr: "File has been uploaded. "
+        },
+        fileNotUploaded : {
+            en: "File has not been uploaded. ",
+            el: "Το αρχείο δεν ανεβάστηκε. ",
+            tr: "File has not been uploaded. "
         }
     },
     //remderer sections
@@ -113,9 +123,9 @@ export const staticResources = {
             element: "htmlElement",
             params: {
                 text: {
-                    en: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="/js/govcyForms.js"></script><script src="/js/govcyFiles.js"></script>`,
-                    el: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="/js/govcyForms.js"></script><script src="/js/govcyFiles.js"></script>`,
-                    tr: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="/js/govcyForms.js"></script><script src="/js/govcyFiles.js"></script>`
+                    en: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyCompiledTemplates.browser.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyFrontendRenderer.browser.js"></script><script src="/js/govcyForms.js"></script><script src="/js/govcyFiles.js"></script>`,
+                    el: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyCompiledTemplates.browser.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyFrontendRenderer.browser.js"></script><script src="/js/govcyForms.js"></script><script src="/js/govcyFiles.js"></script>`,
+                    tr: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyCompiledTemplates.browser.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyFrontendRenderer.browser.js"></script><script src="/js/govcyForms.js"></script><script src="/js/govcyFiles.js"></script>`
                 }
             }
         },
@@ -192,6 +202,27 @@ export function csrfTokenInput(csrfToken) {
     };
 }
 
+/**
+ * Get the site and page input elements 
+ * @param {string} siteId The site id
+ * @param {string} pageUrl The page url
+ * @param {string} lang The page language
+ * @returns {object} htmlElement with the site and page inputs
+ */
+export function siteAndPageInput(siteId, pageUrl, lang = "el") {
+    const siteAndPageInputs = `<input type="hidden" name="_siteId" value="${siteId}"><input type="hidden" name="_pageUrl" value="${pageUrl}"><input type="hidden" name="_lang" value="${lang}">`;
+    return {
+        element: "htmlElement",
+        params: {
+            text: {
+                en: siteAndPageInputs,
+                el: siteAndPageInputs,
+                tr: siteAndPageInputs
+            }
+        }
+    };
+}
+
 /**
  * Error page template
  * @param {object} title the title text element 

package/src/utils/govcyApiDetection.mjs

@@ -10,7 +10,7 @@
 export function isApiRequest(req) {
   const acceptJson = (req.headers?.accept || "").toLowerCase().includes("application/json");
 
-  const apiUrlPattern = /^\/[^/]+\/[^/]+\/(upload|download)$/;
+  const apiUrlPattern =  /^\/apis\/[^/]+\/[^/]+\/(upload|download)$/;
   const isStructuredApiUrl = apiUrlPattern.test(req.originalUrl || req.url);
 
   return acceptJson || isStructuredApiUrl;

package/src/utils/govcyConstants.mjs

@@ -1,7 +1,7 @@
 /**
  * Shared constants for allowed form elements.
  */
-export const ALLOWED_FORM_ELEMENTS = ["textInput", "textArea", "select", "radios", "checkboxes", "datePicker", "dateInput"];
+export const ALLOWED_FORM_ELEMENTS = ["textInput", "textArea", "select", "radios", "checkboxes", "datePicker", "dateInput","fileInput","fileView"];
 export const ALLOWED_FILE_MIME_TYPES = ['application/pdf', 'image/jpeg', 'image/png'];
 export const ALLOWED_FILE_EXTENSIONS = ['pdf', 'jpg', 'jpeg', 'png'];
 export const ALLOWED_FILE_SIZE_MB = 5; // Maximum file size in MB

package/src/utils/govcyDataLayer.mjs

@@ -98,6 +98,14 @@ export function storePageData(store, siteId, pageUrl, formData) {
 
     store.siteData[siteId].inputData[pageUrl]["formData"] = formData;
 }
+
+export function storePageDataElement(store, siteId, pageUrl, elementName, value) {
+    // Ensure session structure is initialized
+    initializeSiteData(store, siteId, pageUrl);
+    
+    // Store the element value
+    store.siteData[siteId].inputData[pageUrl].formData[elementName] = value;
+}
 /**
  * Stores the page's input data in the data layer
  *  * 

package/src/utils/govcyFormHandling.mjs

@@ -5,16 +5,25 @@
  * and show error summary when there are validation errors.
  */
 import { ALLOWED_FORM_ELEMENTS } from "./govcyConstants.mjs";
+import * as dataLayer from "./govcyDataLayer.mjs";
 
 
 /**
  * Helper function to populate form data with session data
  * @param {Array} formElements The form elements  
  * @param {*} theData The data either from session or request
+ * @param {Object} validationErrors The validation errors
+ * @param {Object} store The session store
+ * @param {string} siteId The site ID
+ * @param {string} pageUrl The page URL
+ * @param {string} lang The language
  */
-export function populateFormData(formElements, theData, validationErrors) {
+export function populateFormData(formElements, theData, validationErrors, store = {}, siteId = "", pageUrl = "", lang = "el", fileInputElements = null) {
     const inputElements = ALLOWED_FORM_ELEMENTS;
-
+    const isRootCall = !fileInputElements;
+    if (isRootCall) {
+        fileInputElements = {};
+    }
     // Recursively populate form data with session data
     formElements.forEach(element => {
         if (inputElements.includes(element.element)) {
@@ -53,6 +62,26 @@ export function populateFormData(formElements, theData, validationErrors) {
                     // Invalid format (not matching D/M/YYYY or DD/MM/YYYY)
                     element.params.value = "";
                 }
+            } else if (element.element === "fileInput") {
+                // For fileInput, we change the element.element to "fileView" and set the 
+                // fileId and sha256 from the session store
+                // unneeded handle of `Attachment` at the end
+                // const fileData = dataLayer.getFormDataValue(store, siteId, pageUrl, fieldName + "Attachment");
+                const fileData = dataLayer.getFormDataValue(store, siteId, pageUrl, fieldName);
+                // TODO: Ask Andreas how to handle empty file inputs
+                if (fileData) {
+                    element.element = "fileView";
+                    element.params.fileId = fileData.fileId;
+                    element.params.sha256 = fileData.sha256;
+                    element.params.visuallyHiddenText = element.params.label;
+                    // TODO: Also need to set the `view` and `download` URLs 
+                    element.params.viewHref = "#viewHref";
+                    element.params.deleteHref  = "#deleteHref";
+                } else {
+                    // TODO: Ask Andreas how to handle empty file inputs
+                    element.params.value = "";
+                }       
+                fileInputElements[fieldName] = element;
             // Handle all other input elements (textInput, checkboxes, radios, etc.)
             } else {
                 element.params.value = theData[fieldName] || "";
@@ -78,7 +107,7 @@ export function populateFormData(formElements, theData, validationErrors) {
         if (element.element === "radios" && element.params.items) {
             element.params.items.forEach(item => {
                 if (item.conditionalElements) {
-                    populateFormData(item.conditionalElements, theData, validationErrors);
+                    populateFormData(item.conditionalElements, theData, validationErrors,store, siteId , pageUrl, lang, fileInputElements);
                   
                     // Check if any conditional element has an error and add to the parent "conditionalHasErrors": true
                     if (item.conditionalElements.some(condEl => condEl.params?.error)) {
@@ -88,6 +117,29 @@ export function populateFormData(formElements, theData, validationErrors) {
             });
         }
     });
+    // add file input elements's definition in js object
+    if (isRootCall && Object.keys(fileInputElements).length > 0) {
+        const scriptTag = `
+        <script type="text/javascript">
+            window._govcyFileInputs = ${JSON.stringify(fileInputElements)};
+            window._govcySiteId = "${siteId}";
+            window._govcyPageUrl = "${pageUrl}";
+            window._govcyLang = "${lang}";
+        </script>
+        <div id="_govcy-upload-status" class="govcy-visually-hidden" role="status" aria-live="assertive"></div>
+        <div id="_govcy-upload-error" class="govcy-visually-hidden" role="alert" aria-live="assertive"></div>
+        `.trim();
+        formElements.push({
+            element: 'htmlElement',
+            params: {
+                text: {
+                    en: scriptTag,
+                    el: scriptTag,
+                    tr: scriptTag
+                }
+            }
+        });
+    }
 }
 
 
@@ -96,9 +148,12 @@ export function populateFormData(formElements, theData, validationErrors) {
  * 
  * @param {Array} elements - The form elements (including conditional ones).
  * @param {Object} formData - The submitted form data.
+ * @param {Object} store - The session store .
+ * @param {string} siteId - The site ID .
+ * @param {string} pageUrl - The page URL .
  * @returns {Object} filteredData - The filtered form data.
  */
-export function getFormData(elements, formData) {
+export function getFormData(elements, formData, store = {}, siteId = "", pageUrl = "") {
     const filteredData = {};
     elements.forEach(element => {
         const { name } = element.params || {};
@@ -115,7 +170,7 @@ export function getFormData(elements, formData) {
                         if (item.conditionalElements) {
                             Object.assign(
                                 filteredData,
-                                getFormData(item.conditionalElements, formData)
+                                getFormData(item.conditionalElements, formData, store, siteId, pageUrl)
                             );
                         }
                     });
@@ -130,6 +185,23 @@ export function getFormData(elements, formData) {
                 filteredData[`${name}_day`] = day !== undefined && day !== null ? day : "";
                 filteredData[`${name}_month`] = month !== undefined && month !== null ? month : "";
                 filteredData[`${name}_year`] = year !== undefined && year !== null ? year : "";
+            // handle fileInput
+            } else if (element.element === "fileInput") {
+                // fileInput elements are already stored in the store when it was uploaded
+                // so we just need to check if the file exists in the dataLayer in the store and add it the filteredData
+                // unneeded handle of `Attachment` at the end
+                // const fileData = dataLayer.getFormDataValue(store, siteId, pageUrl, name + "Attachment");
+                const fileData = dataLayer.getFormDataValue(store, siteId, pageUrl, name);
+                if (fileData) {
+                    // unneeded handle of `Attachment` at the end
+                    // filteredData[name + "Attachment"] = fileData;
+                    filteredData[name] = fileData;
+                } else {
+                    //TODO: Ask Andreas how to handle empty file inputs
+                    // unneeded handle of `Attachment` at the end
+                    // filteredData[name + "Attachment"] = ""; // or handle as needed
+                    filteredData[name] = ""; // or handle as needed
+                }
             // Handle other elements (e.g., textInput, textArea, datePicker)
             } else {
                 filteredData[name] = formData[name] !== undefined && formData[name] !== null ? formData[name] : "";

package/src/utils/govcyHandleFiles.mjs

@@ -27,6 +27,7 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
     if (!file || !elementName) {
       return {
         status: 400,
+        dataStatus: 400,
         errorMessage: 'Missing file or element name'
       };
     }
@@ -37,6 +38,7 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
     if (!uploadCfg?.url || !uploadCfg?.clientKey || !uploadCfg?.serviceId) {
       return {
         status: 400,
+        dataStatus: 401,
         errorMessage: 'Missing upload configuration'
       };
     }
@@ -53,6 +55,7 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
     if (!url || !clientKey) {
       return {
         status: 400,
+        dataStatus: 402,
         errorMessage: 'Missing environment variables for upload'
       };
     }
@@ -67,6 +70,7 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
     if (!page?.pageTemplate) {
       return {
         status: 400,
+        dataStatus: 403,
         errorMessage: 'Invalid page configuration'
       };
     }
@@ -77,6 +81,7 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
     if (conditionResult.result === false) {
       return {
         status: 403,
+        dataStatus: 404,
         errorMessage: 'This page is skipped by conditional logic'
       };
     }
@@ -88,6 +93,7 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
     if (!isAllowed) {
       return {
         status: 403,
+        dataStatus: 405,
         errorMessage: `File input [${elementName}] not allowed on this page`
       };
     }
@@ -96,6 +102,7 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
     if (file.size === 0) {
       return {
         status: 400,
+        dataStatus: 406,
         errorMessage: 'Uploaded file is empty'
       };
     }
@@ -105,6 +112,7 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
     if (!ALLOWED_FILE_MIME_TYPES.includes(file.mimetype)) {
         return {
             status: 400,
+            dataStatus: 407,
             errorMessage: 'Invalid file type (MIME not allowed)'
         };
     }
@@ -113,6 +121,7 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
     if (!isMagicByteValid(file.buffer, file.mimetype)) {
         return {
             status: 400,
+            dataStatus: 408,
             errorMessage: 'Invalid file type (magic byte mismatch)'
         };
     }
@@ -121,6 +130,7 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
     if (file.size > ALLOWED_FILE_SIZE_MB * 1024 * 1024) {
       return {
         status: 400,
+        dataStatus: 409,
         errorMessage: 'File exceeds allowed size'
       };
     }
@@ -161,6 +171,7 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
     if (!response?.Succeeded) {
       return {
         status: 500,
+        dataStatus: 410,
         errorMessage: `${response?.ErrorCode} - ${response?.ErrorMessage} - fileUploadAPIEndpoint returned succeeded false`
       };
     }
@@ -169,11 +180,19 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
     if (!response?.Data?.fileId || !response?.Data?.sha256) {
       return {
         status: 500,
+        dataStatus: 411,
         errorMessage: 'Missing fileId or sha256 in response'
       };
     }
 
     // ✅ Success
+    // Store the file metadata in the session store
+    // unneeded handle of `Attachment` at the end
+    // dataLayer.storePageDataElement(store, siteId, pageUrl, elementName+"Attachment", {
+    dataLayer.storePageDataElement(store, siteId, pageUrl, elementName, {
+      sha256: response.Data.sha256,
+      fileId: response.Data.fileId,
+    });
     logger.debug("File upload successful", response.Data);
     logger.info(`File uploaded successfully for element ${elementName} on page ${pageUrl} for site ${siteId}`);
     return {
@@ -190,6 +209,7 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
   } catch (err) {
     return {
       status: 500,
+      dataStatus: 500,
       errorMessage: 'Upload failed' + (err.message ? `: ${err.message}` : ''),
     };
   }

package/src/utils/govcySubmitData.mjs

@@ -66,6 +66,12 @@ export function prepareSubmissionData(req, siteId, service) {
             // Store in submissionData
             submissionData[pageUrl].formData[elId] = value;
 
+            // handle fileInput
+            if (elType === "fileInput") {
+                // change the name of the key to include "Attachment" at the end but not have the original key
+                submissionData[pageUrl].formData[elId + "Attachment"] = value;
+                delete submissionData[pageUrl].formData[elId];
+            }
 
             // 🔄 If radios with conditionalElements, walk ALL options
             if (elType === "radios" && Array.isArray(element.params?.items)) {
@@ -85,6 +91,12 @@ export function prepareSubmissionData(req, siteId, service) {
 
                         // Store even if the field was not visible to user
                         submissionData[pageUrl].formData[condId] = condValue;
+                        // handle fileInput
+                        if (condType === "fileInput") {
+                            // change the name of the key to include "Attachment" at the end but not have the original key
+                            submissionData[pageUrl].formData[condId + "Attachment"] = condValue;
+                            delete submissionData[pageUrl].formData[condId];
+                        }
                     }
                 }
             }
@@ -291,6 +303,10 @@ function getValue(formElement, pageUrl, req, siteId) {
     let value = ""
     if (formElement.element === "dateInput") {
         value = getDateInputISO(pageUrl, formElement.params.name, req, siteId);
+    } else if (formElement.element === "fileInput") {
+        // unneeded handle of `Attachment` at the end
+        // value = dataLayer.getFormDataValue(req.session, siteId, pageUrl, formElement.params.name + "Attachment");
+        value = dataLayer.getFormDataValue(req.session, siteId, pageUrl, formElement.params.name);
     } else {
         value = dataLayer.getFormDataValue(req.session, siteId, pageUrl, formElement.params.name);
     }
@@ -340,6 +356,17 @@ function getValueLabel(formElement, value, pageUrl, req, siteId, service) {
         return govcyResources.getSameMultilingualObject(service.site.languages, formattedDate);
     }
 
+    // handle fileInput
+    if (formElement.element === "fileInput") {
+        // TODO: Ask Andreas how to handle empty file inputs 
+        if (value) {
+            return govcyResources.staticResources.text.fileUploaded;
+        } else {
+            return govcyResources.getSameMultilingualObject(service.site.languages, "");
+            // return govcyResources.staticResources.text.fileNotUploaded;
+        }
+    }
+
     // textInput, textArea, etc.
     return govcyResources.getSameMultilingualObject(service.site.languages, value);
 }

package/src/utils/govcyValidator.mjs

@@ -263,6 +263,9 @@ export function validateFormElements(elements, formData, pageUrl) {
         formData[`${field.params.name}_day`]]
           .filter(Boolean) // Remove empty values
           .join("-") // Join remaining parts
+        // unneeded handle of `Attachment` at the end
+        // : (field.element === "fileInput") // Handle fileInput
+        //   ? formData[`${field.params.name}Attachment`] || ""
         : formData[field.params.name] || ""; // Get submitted value
 
       //Autocheck: check for "checkboxes", "radios", "select" if `fieldValue` is one of the `field.params.items
@@ -310,6 +313,10 @@ export function validateFormElements(elements, formData, pageUrl) {
                   formData[`${conditionalElement.params.name}_day`]]
                     .filter(Boolean) // Remove empty values
                     .join("-") // Join remaining parts
+                  : (conditionalElement.element === "fileInput") // Handle fileInput
+                      // unneeded handle of `Attachment` at the end
+                      // ? formData[`${conditionalElement.params.name}Attachment`] || ""
+                      ? formData[`${conditionalElement.params.name}`] || ""
                   : formData[conditionalElement.params.name] || ""; // Get submitted value
 
                 //Autocheck: check for "checkboxes", "radios", "select" if `fieldValue` is one of the `field.params.items`