@gov-cy/govcy-express-services 1.0.0-alpha.5 → 1.0.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gov-cy/govcy-express-services",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.7",
   "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",
@@ -48,12 +48,14 @@
   },
   "dependencies": {
     "@gov-cy/dsf-email-templates": "^2.1.0",
-    "@gov-cy/govcy-frontend-renderer": "^1.18.0",
+    "@gov-cy/govcy-frontend-renderer": "^1.20.0",
     "axios": "^1.9.0",
     "cookie-parser": "^1.4.7",
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
     "express-session": "^1.17.3",
+    "form-data": "^4.0.4",
+    "multer": "^2.0.2",
     "openid-client": "^6.3.4",
     "puppeteer": "^24.6.0"
   },

package/src/index.mjs

@@ -24,6 +24,7 @@ import { govcyManifestHandler } from './middleware/govcyManifestHandler.mjs';
 import { govcyRoutePageHandler } from './middleware/govcyRoutePageHandler.mjs';
 import { govcyServiceEligibilityHandler } from './middleware/govcyServiceEligibilityHandler.mjs';
 import { govcyLoadSubmissionData } from './middleware/govcyLoadSubmissionData.mjs';
+import { govcyUploadMiddleware } from './middleware/govcyUpload.mjs';
 import { isProdOrStaging , getEnvVariable, whatsIsMyEnvironment } from './utils/govcyEnvVariables.mjs';
 import { logger } from "./utils/govcyLogger.mjs";
 
@@ -128,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());
@@ -150,7 +159,6 @@ export default function initializeGovCyExpressService(){
   // 👀📥 -- ROUTE: Handle POST requests (Form Submissions) based on siteId and pageUrl, using govcyFormsPostHandler middleware
   app.post('/:siteId/:pageUrl', serviceConfigDataMiddleware, requireAuth, naturalPersonPolicy, govcyServiceEligibilityHandler(true), govcyFormsPostHandler());
   
-  
   // post for /:siteId/review
   
   // 🔹 Catch 404 errors (must be after all routes)

package/src/middleware/cyLoginAuth.mjs

@@ -7,6 +7,8 @@
 import { getLoginUrl, handleCallback, getLogoutUrl } from '../auth/cyLoginAuth.mjs';
 import { logger } from "../utils/govcyLogger.mjs";
 import { handleMiddlewareError } from "../utils/govcyUtils.mjs";
+import { errorResponse } from "../utils/govcyApiResponse.mjs"; 
+import { isApiRequest } from '../utils/govcyApiDetection.mjs';
 
 /**
  * Middleware to check if the user is authenticated. If not, redirect to the login page.
@@ -17,6 +19,12 @@ import { handleMiddlewareError } from "../utils/govcyUtils.mjs";
  */
 export function requireAuth(req, res, next) {
     if (!req.session.user) {
+        if (isApiRequest(req)) {
+            const err = new Error("Unauthorized: user not authenticated");
+            err.status = 401;
+            return next(err);
+        }
+
         // Store the original URL before redirecting to login
         req.session.redirectAfterLogin = req.originalUrl;
         return res.redirect('/login');

package/src/middleware/govcyCsrf.mjs

@@ -1,5 +1,8 @@
 
 import { handleMiddlewareError } from "../utils/govcyUtils.mjs";
+import { errorResponse } from '../utils/govcyApiResponse.mjs';
+import { isApiRequest } from '../utils/govcyApiDetection.mjs';
+
 /**
  * Middleware to handle CSRF token generation and validation.
  * 
@@ -14,7 +17,18 @@ export function govcyCsrfMiddleware(req, res, next) {
   }
 
   req.csrfToken = () => req.session.csrfToken;
-
+  
+  if (
+    req.method === 'POST' &&
+    req.headers['content-type']?.includes('multipart/form-data') &&
+    isApiRequest(req)) {
+    const tokenFromHeader = req.get('X-CSRF-Token');
+    // UNCOMMENT
+    if (!tokenFromHeader || tokenFromHeader !== req.session.csrfToken) {
+      return res.status(400).json(errorResponse(403, 'Invalid CSRF token'));
+    }
+    return next();
+  } 
   // Check token on POST requests
   if (req.method === 'POST') {
     const tokenFromBody = req.body._csrf;

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/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

@@ -0,0 +1,36 @@
+import multer from 'multer';
+import { logger } from '../utils/govcyLogger.mjs';
+import { successResponse, errorResponse } from '../utils/govcyApiResponse.mjs';
+import { ALLOWED_MULTER_FILE_SIZE_MB } from "../utils/govcyConstants.mjs";
+import { handleFileUpload } from "../utils/govcyHandleFiles.mjs";
+
+// Configure multer to store the file in memory (not disk) and limit the size to 10MB
+const upload = multer({
+    storage: multer.memoryStorage(),
+    limits: { fileSize: ALLOWED_MULTER_FILE_SIZE_MB * 1024 * 1024 } // 10MB
+});
+
+
+
+
+export const govcyUploadMiddleware = [
+    upload.single('file'), // multer parses the uploaded file and stores it in req.file
+
+    async function govcyUploadHandler(req, res) {
+        const result = await handleFileUpload({
+            service: req.serviceData,
+            store: req.session,
+            siteId: req.params.siteId,
+            pageUrl: req.params.pageUrl,
+            elementName: req.body?.elementName,
+            file: req.file
+        });
+
+        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.json(successResponse(result.data));
+    }
+];

package/src/public/js/govcyFiles.js

@@ -0,0 +1,152 @@
+// 🔍 Select all file inputs that have the .govcy-file-upload class
+const fileInputs = document.querySelectorAll('input[type="file"].govcy-file-upload');
+
+// 🔁 Loop over each file input and attach a change event listener
+fileInputs.forEach(input => {
+  input.addEventListener('change', async (event) => {
+    const messages = {
+      "uploadSuccesful": {
+        "el": "Το αρχείο ανεβαστηκε",
+        "en": "File uploaded successfully",
+        "tr": "File uploaded successfully"
+      },
+      "uploadFailed": {
+        "el": "Αποτυχια ανεβασης",
+        "en": "File upload failed",
+        "tr": "File upload failed"
+      }
+    };
+    // 🔐 Get the CSRF token from a hidden input field (generated by your backend)
+    const csrfToken = document.querySelector('input[type="hidden"][name="_csrf"]')?.value;
+    // 🔧 Define siteId and pageUrl (you can dynamically extract these later)
+    const siteId = window._govcySiteId || "";
+    const pageUrl = window._govcyPageUrl || "";
+    const lang = window._govcyLang || "el";
+    // 📦 Grab the selected file
+    const file = event.target.files[0];
+    const elementName = input.name; // Form field's `name` attribute
+
+    if (!file) return; // Exit if no file was selected
+
+    // 🧵 Prepare form-data payload for the API
+    const 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(`/apis/${siteId}/${pageUrl}/upload`, formData, {
+        headers: {
+          'X-CSRF-Token': csrfToken // 🔐 Pass CSRF token in custom header
+        }
+      });
+
+      const { sha256, fileId } = response.data.Data;
+
+      // 📝 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;
+
+      // ✅ Success
+      // Create an instance of GovcyFrontendRendererBrowser
+      const renderer = new GovcyFrontendRendererBrowser();
+      // Define the input data
+        const inputData =
+        {
+          "site": {
+            "lang": lang
+          }
+        };
+
+        const fileInputMap = window._govcyFileInputs || {};
+        let fileElement = fileInputMap[elementName];
+        fileElement.element = "fileView";
+        fileElement.params.fileId = fileId;
+        fileElement.params.sha256 = sha256;
+        fileElement.params.visuallyHiddenText = fileElement.params.label;
+        fileElement.params.error = null;
+        // TODO: Also need to set the `view` and `download` URLs 
+        fileElement.params.viewHref = "#viewHref";
+        fileElement.params.deleteHref  = "#deleteHref";
+        // Construct the JSONTemplate
+        const JSONTemplate = {
+          "elements": [fileElement]
+        };
+        
+        //render HTML into string
+        let renderedHtml = renderer.renderFromJSON(JSONTemplate,inputData);
+        // look for element with id `${elementName}-outer-control`
+        // if not found look for element with id `${elementName}-input-control`
+        // if not found look for element with id `${elementName}-view-control`
+        var outerElement = document.getElementById(`${elementName}-outer-control`) 
+        || document.getElementById(`${elementName}-input-control`) 
+        || document.getElementById(`${elementName}-view-control`);
+
+        if (outerElement) {
+          //remove all classes from outerElement
+          outerElement.className = "";
+          //set the id of the outerElement to `${elementName}-outer-control`
+          outerElement.id = `${elementName}-outer-control`;
+          //update DOM and initialize the JS components
+          renderer.updateDOMAndInitialize(`${elementName}-outer-control`, renderedHtml);
+        }
+        // ✅ Update ARIA live region with success message
+        const statusRegion = document.getElementById('_govcy-upload-status');
+        if (statusRegion) {
+          statusRegion.textContent = messages.uploadSuccesful[lang];
+          setTimeout(() => {
+            statusRegion.textContent = '';
+          }, 10000);
+        }
+      // alert('✅ File uploaded successfully');
+
+    } catch (err) {
+      // Create an instance of GovcyFrontendRendererBrowser
+      const renderer = new GovcyFrontendRendererBrowser();
+      const lang = window._govcyLang || "el";
+      // Define the input data
+      const inputData =
+      {
+        "site": {
+          "lang": lang
+        }
+      };
+      const fileInputMap = window._govcyFileInputs || {};
+      let fileElement = fileInputMap[elementName];
+      fileElement.element = "fileInput";
+      fileElement.params.fileId = "";
+      fileElement.params.sha256 = ""
+      fileElement.params.error = messages.uploadFailed;
+
+      // Construct the JSONTemplate
+      const JSONTemplate = {
+        "elements": [fileElement]
+      };
+      //render HTML into string
+      let renderedHtml = renderer.renderFromJSON(JSONTemplate,inputData);
+      var outerElement = document.getElementById(`${elementName}-outer-control`) 
+        || document.getElementById(`${elementName}-input-control`) 
+        || document.getElementById(`${elementName}-view-control`);
+
+      if (outerElement) {
+        //remove all classes from outerElement
+        outerElement.className = "";
+        //set the id of the outerElement to `${elementName}-outer-control`
+        outerElement.id = `${elementName}-outer-control`;
+        //update DOM and initialize the JS components
+        renderer.updateDOMAndInitialize(`${elementName}-outer-control`, renderedHtml);
+        //TODO: Kamran need to figure a way to re register the DOM event on change
+      }
+      // ✅ Update ARIA live region with success message
+      const statusRegion = document.getElementById('_govcy-upload-error');
+      if (statusRegion) {
+        statusRegion.textContent = messages.uploadFailed[lang];
+        setTimeout(() => {
+          statusRegion.textContent = '';
+        }, 10000);
+      }
+      // // ⚠️ Show an error message if upload fails
+      // alert('❌ Upload failed: ' + (err.response?.data?.error || err.message));
+    }
+  });
+});

package/src/resources/govcyResources.mjs

@@ -113,9 +113,9 @@ export const staticResources = {
             element: "htmlElement",
             params: {
                 text: {
-                    en: `<script src="/js/govcyForms.js"></script>`,
-                    el: `<script src="/js/govcyForms.js"></script>`,
-                    tr: `<script src="/js/govcyForms.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 +192,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

@@ -0,0 +1,17 @@
+/**
+ * Determines if a request is targeting an API endpoint.
+ * Currently matches:
+ * - Accept header with application/json
+ * - URLs ending with /upload or /download under a site/page structure
+ *
+ * @param {object} req - Express request object
+ * @returns {boolean}
+ */
+export function isApiRequest(req) {
+  const acceptJson = (req.headers?.accept || "").toLowerCase().includes("application/json");
+
+  const apiUrlPattern =  /^\/apis\/[^/]+\/[^/]+\/(upload|download)$/;
+  const isStructuredApiUrl = apiUrlPattern.test(req.originalUrl || req.url);
+
+  return acceptJson || isStructuredApiUrl;
+}

package/src/utils/govcyApiRequest.mjs

@@ -5,7 +5,7 @@ import { logger } from "./govcyLogger.mjs";
  * Utility to handle API communication with retry logic
  * @param {string} method - HTTP method (e.g., 'post', 'get', etc.)
  * @param {string} url - API endpoint URL
- * @param {object} inputData - Payload for the request (optional)
+ * @param {object|FormData} inputData - Payload for the request (optional)
  * @param {boolean} useAccessTokenAuth - Whether to use Authorization header with Bearer token
  * @param {object} user - User object containing access_token (optional)
  * @param {object} headers - Custom headers (optional)
@@ -39,6 +39,14 @@ export async function govcyApiRequest(
         requestHeaders['Authorization'] = `Bearer ${user.access_token}`;
     }
 
+    // If inputData is FormData, for attachments
+    if (inputData instanceof (await import('form-data')).default) {
+        requestHeaders = {
+        ...requestHeaders,
+        ...inputData.getHeaders(), // includes boundary in content-type
+        };
+    }
+
     while (attempt < retries) {
         try {
             logger.debug(`📤 Sending API request (Attempt ${attempt + 1})`, { method, url, inputData, requestHeaders });
@@ -47,13 +55,22 @@ export async function govcyApiRequest(
             const axiosConfig = {
                 method,
                 url,
-                [method?.toLowerCase() === 'get' ? 'params' : 'data']: inputData,
+                ...(inputData instanceof (await import('form-data')).default // If inputData is FormData, for attachments
+                    ? { data: inputData }
+                    : { [method?.toLowerCase() === 'get' ? 'params' : 'data']: inputData }),
                 headers: requestHeaders,
                 timeout: 10000, // 10 seconds timeout
                 // ✅ Treat only these statuses as "resolved" (no throw)
                 validateStatus: (status) => allowedHTTPStatusCodes.includes(status),
             };
 
+            // If inputData is FormData, for attachments
+            if (inputData instanceof (await import('form-data')).default) {
+                axiosConfig.maxContentLength = Infinity;
+                axiosConfig.maxBodyLength = Infinity;
+            }
+
+
             // Add httpsAgent if NOT production to allow self-signed certificates
             // Use per-call config for self-signed certs
             if (allowSelfSignedCerts) {

package/src/utils/govcyApiResponse.mjs

@@ -0,0 +1,31 @@
+/**
+ * The successResponse function creates a standardized success response object.
+ * 
+ * @param {*} data - The data to be included in the response. 
+ * @returns  {Object} - The success response object.
+ */
+export function successResponse(data = null) {
+  return {
+    Succeeded: true,
+    ErrorCode: 0,
+    ErrorMessage: '',
+    Data: data
+  };
+}
+
+/**
+ * The errorResponse function creates a standardized error response object.
+ * 
+ * @param {int} code - The error code to be included in the response.
+ * @param {string} message - The error message to be included in the response.
+ * @param {Object} data - Additional data to be included in the response.
+ * @returns {Object} - The error response object.
+ */
+export function errorResponse(code = 1, message = 'Unknown error', data = null) {
+  return {
+    Succeeded: false,
+    ErrorCode: code,
+    ErrorMessage: message,
+    Data: data
+  };
+}

package/src/utils/govcyConstants.mjs

@@ -1,4 +1,8 @@
 /**
  * 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
+export const ALLOWED_MULTER_FILE_SIZE_MB = 10; // 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
  *  * 
@@ -328,6 +336,20 @@ export function getSiteLoadData(store, siteId) {
     return null;
 }
 
+/**
+ * Get the site's reference number from load data from the store 
+ * 
+ * @param {object} store The session store
+ * @param {string} siteId The site ID
+ * @returns {string|null} The reference number or null if not available
+ */
+export function getSiteLoadDataReferenceNumber(store, siteId) {
+  const ref = store?.siteData?.[siteId]?.loadData?.referenceValue;
+
+  return typeof ref === 'string' && ref.trim() !== '' ? ref : null;
+}
+
+
 /**
  * Get the site's input data from the store 
  * 

package/src/utils/govcyExpressions.mjs

@@ -124,7 +124,7 @@ export function evaluateExpressionWithFlattening(expression, object, prefix = ''
  * @returns {{ result: true } | { result: false, redirect: string }}
  *          An object indicating whether to render the page or redirect
  */
-export function evaluatePageConditions(page, store, siteKey, req) {
+export function evaluatePageConditions(page, store, siteKey, req = {}) {
   // Get conditions array from nested page structure
   const conditions = page?.pageData?.conditions;
 

package/src/utils/govcyFormHandling.mjs

@@ -5,16 +5,22 @@
  * 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") {
     const inputElements = ALLOWED_FORM_ELEMENTS;
-
+    let fileInputElements = {};
     // Recursively populate form data with session data
     formElements.forEach(element => {
         if (inputElements.includes(element.element)) {
@@ -53,6 +59,24 @@ 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
+                const fileData = dataLayer.getFormDataValue(store, siteId, pageUrl, fieldName + "Attachment");
+                // 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] || "";
@@ -88,6 +112,29 @@ export function populateFormData(formElements, theData, validationErrors) {
             });
         }
     });
+    // add file input elements's definition in js object
+    if (fileInputElements != {}) {
+        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="polite"></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 +143,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 || {};
@@ -130,6 +180,17 @@ 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
+                const fileData = dataLayer.getFormDataValue(store, siteId, pageUrl, name + "Attachment");
+                if (fileData) {
+                    filteredData[name + "Attachment"] = fileData;
+                } else {
+                    //TODO: Ask Andreas how to handle empty file inputs
+                    filteredData[name + "Attachment"] = ""; // 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

@@ -0,0 +1,282 @@
+import FormData from 'form-data';
+import { getPageConfigData } from "./govcyLoadConfigData.mjs";
+import { evaluatePageConditions } from "./govcyExpressions.mjs";
+import { getEnvVariable, getEnvVariableBool } from "./govcyEnvVariables.mjs";
+import { ALLOWED_FILE_MIME_TYPES, ALLOWED_FILE_SIZE_MB } from "./govcyConstants.mjs";
+import { govcyApiRequest } from "./govcyApiRequest.mjs";
+import * as dataLayer from "./govcyDataLayer.mjs";
+import { logger } from './govcyLogger.mjs'; 
+
+/**
+ * Handles the logic for uploading a file to the configured Upload API.
+ * Does not send a response — just returns a standard object to be handled by middleware.
+ *
+ * @param {object} opts - Input parameters
+ * @param {object} opts.service - The service config object
+ * @param {object} opts.store - Session store (req.session)
+ * @param {string} opts.siteId - Site ID
+ * @param {string} opts.pageUrl - Page URL
+ * @param {string} opts.elementName - Name of file input
+ * @param {object} opts.file - File object from multer (req.file)
+ * @returns {Promise<{ status: number, data?: object, errorMessage?: string }>}
+ */
+export async function handleFileUpload({ service, store, siteId, pageUrl, elementName, file }) {
+  try {
+    // Validate essentials
+    // Early exit if key things are missing
+    if (!file || !elementName) {
+      return {
+        status: 400,
+        errorMessage: 'Missing file or element name'
+      };
+    }
+
+    // Get the upload configuration
+    const uploadCfg = service?.site?.fileUploadAPIEndpoint;
+    // Check if upload configuration is available
+    if (!uploadCfg?.url || !uploadCfg?.clientKey || !uploadCfg?.serviceId) {
+      return {
+        status: 400,
+        errorMessage: 'Missing upload configuration'
+      };
+    }
+
+    // Environment vars
+    const allowSelfSignedCerts = getEnvVariableBool("ALLOW_SELF_SIGNED_CERTIFICATES", false);
+    let url = getEnvVariable(uploadCfg.url || "", false);
+    const clientKey = getEnvVariable(uploadCfg.clientKey || "", false);
+    const serviceId = getEnvVariable(uploadCfg.serviceId || "", false);
+    const dsfGtwKey = getEnvVariable(uploadCfg?.dsfgtwApiKey || "", "");
+    const method = (uploadCfg?.method || "PUT").toLowerCase();
+
+     // Check if the upload API is configured correctly
+    if (!url || !clientKey) {
+      return {
+        status: 400,
+        errorMessage: 'Missing environment variables for upload'
+      };
+    }
+
+    // Construct the URL with tag being the elementName
+    const tag = encodeURIComponent(elementName.trim());
+    url += `/${tag}`;
+
+    // Get the page configuration using utility (safely extracts the correct page)
+    const page = getPageConfigData(service, pageUrl);
+    // Check if the page template is valid
+    if (!page?.pageTemplate) {
+      return {
+        status: 400,
+        errorMessage: 'Invalid page configuration'
+      };
+    }
+
+    // ----- Conditional logic comes here
+    // Respect conditional logic: If the page is skipped due to conditions, abort
+    const conditionResult = evaluatePageConditions(page, store, siteId);
+    if (conditionResult.result === false) {
+      return {
+        status: 403,
+        errorMessage: 'This page is skipped by conditional logic'
+      };
+    }
+
+    // deep copy the page template to avoid modifying the original
+    const pageTemplateCopy = JSON.parse(JSON.stringify(page.pageTemplate));
+    // Validate the field: Only allow upload if the page contains a fileInput with the given name
+    const isAllowed = pageContainsFileInput(pageTemplateCopy, elementName);
+    if (!isAllowed) {
+      return {
+        status: 403,
+        errorMessage: `File input [${elementName}] not allowed on this page`
+      };
+    }
+
+    // Empty file check
+    if (file.size === 0) {
+      return {
+        status: 400,
+        errorMessage: 'Uploaded file is empty'
+      };
+    }
+
+    // file type checks
+    // 1. Check declared mimetype
+    if (!ALLOWED_FILE_MIME_TYPES.includes(file.mimetype)) {
+        return {
+            status: 400,
+            errorMessage: 'Invalid file type (MIME not allowed)'
+        };
+    }
+
+    // 2. Check actual file content (magic bytes) matches claimed MIME type
+    if (!isMagicByteValid(file.buffer, file.mimetype)) {
+        return {
+            status: 400,
+            errorMessage: 'Invalid file type (magic byte mismatch)'
+        };
+    }
+
+    // File size check
+    if (file.size > ALLOWED_FILE_SIZE_MB * 1024 * 1024) {
+      return {
+        status: 400,
+        errorMessage: 'File exceeds allowed size'
+      };
+    }
+
+    // Prepare FormData
+    const form = new FormData();
+    form.append('file', file.buffer, {
+      filename: file.originalname,
+      contentType: file.mimetype,
+    });
+    
+    logger.debug("Prepared FormData with file:", {
+        filename: file.originalname,
+        mimetype: file.mimetype,
+        size: file.size
+    });
+
+    // Get the user
+    const user = dataLayer.getUser(store);
+    // Perform the upload request
+    const response = await govcyApiRequest(
+      method,
+      url,
+      form,
+      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 {
+        status: 500,
+        errorMessage: `${response?.ErrorCode} - ${response?.ErrorMessage} - fileUploadAPIEndpoint returned succeeded false`
+      };
+    }
+
+    // Check if the response contains the expected data
+    if (!response?.Data?.fileId || !response?.Data?.sha256) {
+      return {
+        status: 500,
+        errorMessage: 'Missing fileId or sha256 in response'
+      };
+    }
+
+    // ✅ Success
+    // Store the file metadata in the session store
+    dataLayer.storePageDataElement(store, siteId, pageUrl, elementName+"Attachment", {
+      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 {
+      status: 200,
+      data: {
+        sha: response.Data.sha256,
+        filename: response.Data.fileName || '',
+        fileId: response.Data.fileId,
+        mimeType: response.Data.contentType || '',
+        sha256: response.Data.fileSize || ''
+      }
+    };
+
+  } catch (err) {
+    return {
+      status: 500,
+      errorMessage: 'Upload failed' + (err.message ? `: ${err.message}` : ''),
+    };
+  }
+}
+
+//--------------------------------------------------------------------------
+// Helper Functions
+/**
+ * Recursively checks whether any element (or its children) is a fileInput
+ * with the matching elementName.
+ *
+ * Supports:
+ * - Top-level fileInput
+ * - Nested `params.elements` (used in groups, conditionals, etc.)
+ * - Conditional radios/checkboxes with `items[].conditionalElements`
+ * 
+ * @param {Array} elements - The array of elements to search
+ * @param {string} targetName - The name of the file input to check
+ * @returns {boolean} True if a matching fileInput is found, false otherwise
+ */
+function containsFileInput(elements = [], targetName) {
+  for (const el of elements) {
+    // ✅ Direct file input match
+    if (el.element === 'fileInput' && el.params?.name === targetName) {
+      return true;
+    }
+    // 🔁 Recurse into nested elements (e.g. groups, conditionals)
+    if (Array.isArray(el?.params?.elements)) {
+      if (containsFileInput(el.params.elements, targetName)) return true;
+    }
+
+    // 🎯 Special case: conditional radios/checkboxes
+    if (
+      (el.element === 'radios' || el.element === 'checkboxes') &&
+      Array.isArray(el?.params?.items)
+    ) {
+      for (const item of el.params.items) {
+        if (Array.isArray(item?.conditionalElements)) {
+          if (containsFileInput(item.conditionalElements, targetName)) return true;
+        }
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * Checks whether the specified page contains a valid fileInput for this element ID
+ * under any <form> element in its sections
+ * 
+ * @param {object} pageTemplate The page template object
+ * @param {string} elementName The name of the element to check
+ * @return {boolean} True if a fileInput exists, false otherwise
+ */
+function pageContainsFileInput(pageTemplate, elementName) {
+  const sections = pageTemplate?.sections || [];
+  return sections.some(section =>
+    section?.elements?.some(el =>
+      el.element === 'form' &&
+      containsFileInput(el.params?.elements, elementName)
+    )
+  );
+}
+
+/**
+ * Validates magic bytes against expected mimetype
+ * @param {Buffer} buffer 
+ * @param {string} mimetype 
+ * @returns {boolean}
+ */
+function isMagicByteValid(buffer, mimetype) {
+  const signatures = {
+    'application/pdf':      [0x25, 0x50, 0x44, 0x46],                // %PDF
+    'image/png':            [0x89, 0x50, 0x4E, 0x47],                // PNG
+    'image/jpeg':           [0xFF, 0xD8, 0xFF],                      // JPG/JPEG
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': [0x50, 0x4B, 0x03, 0x04], // DOCX
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [0x50, 0x4B, 0x03, 0x04],       // XLSX
+  };
+
+  const expected = signatures[mimetype];
+  if (!expected) return false; // unknown type
+
+  const actual = Array.from(buffer.slice(0, expected.length));
+  return expected.every((byte, i) => actual[i] === byte);
+}

package/src/utils/govcyValidator.mjs

@@ -263,6 +263,8 @@ export function validateFormElements(elements, formData, pageUrl) {
         formData[`${field.params.name}_day`]]
           .filter(Boolean) // Remove empty values
           .join("-") // Join remaining parts
+        : (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 +312,8 @@ 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
+                      ? formData[`${conditionalElement.params.name}Attachment`] || ""
                   : formData[conditionalElement.params.name] || ""; // Get submitted value
 
                 //Autocheck: check for "checkboxes", "radios", "select" if `fieldValue` is one of the `field.params.items`