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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gov-cy/govcy-express-services",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.9",
   "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

@@ -25,6 +25,7 @@ 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 { govcyDeleteFilePageHandler, govcyDeleteFilePostHandler } from './middleware/govcyDeleteFileHandler.mjs';
 import { isProdOrStaging , getEnvVariable, whatsIsMyEnvironment } from './utils/govcyEnvVariables.mjs';
 import { logger } from "./utils/govcyLogger.mjs";
 
@@ -150,9 +151,15 @@ export default function initializeGovCyExpressService(){
   // ✅ -- ROUTE: Add Success Page Route (BEFORE the dynamic route)
   app.get('/:siteId/success',serviceConfigDataMiddleware, requireAuth, naturalPersonPolicy, govcyServiceEligibilityHandler(), govcySuccessPageHandler(), renderGovcyPage());
   
+  // ❌🗃️ -- ROUTE: Delete file (BEFORE the dynamic route)
+  app.get('/:siteId/:pageUrl/:elementName/delete-file', serviceConfigDataMiddleware, requireAuth, naturalPersonPolicy, govcyServiceEligibilityHandler(), govcyLoadSubmissionData(), govcyDeleteFilePageHandler(), renderGovcyPage());
+  
   // 📝 -- ROUTE: Dynamic route to render pages based on siteId and pageUrl, using govcyPageHandler middleware
   app.get('/:siteId/:pageUrl', serviceConfigDataMiddleware, requireAuth, naturalPersonPolicy, govcyServiceEligibilityHandler(true), govcyLoadSubmissionData(), govcyPageHandler(), renderGovcyPage());
   
+  // ❌🗃️📥 -- ROUTE: Handle POST requests for delete file
+  app.post('/:siteId/:pageUrl/:elementName/delete-file', serviceConfigDataMiddleware, requireAuth, naturalPersonPolicy, govcyServiceEligibilityHandler(true), govcyDeleteFilePostHandler());
+  
   // 📥 -- ROUTE: Handle POST requests for review page. The `submit` action
   app.post('/:siteId/review', serviceConfigDataMiddleware, requireAuth, naturalPersonPolicy, govcyServiceEligibilityHandler(), govcyReviewPostHandler());
   

package/src/middleware/govcyDeleteFileHandler.mjs

@@ -0,0 +1,234 @@
+import * as govcyResources from "../resources/govcyResources.mjs";
+import * as dataLayer from "../utils/govcyDataLayer.mjs";
+import { logger } from "../utils/govcyLogger.mjs";
+import { pageContainsFileInput } from "../utils/govcyHandleFiles.mjs";
+import { whatsIsMyEnvironment } from '../utils/govcyEnvVariables.mjs';
+import { handleMiddlewareError } from "../utils/govcyUtils.mjs";
+import { getPageConfigData } from "../utils/govcyLoadConfigData.mjs";
+import { evaluatePageConditions } from "../utils/govcyExpressions.mjs"; 
+import { URL } from "url";
+
+
+/**
+ * Middleware to handle the delete file page.
+ * This middleware processes the delete file page, populates the question, and shows validation errors.
+ */
+export function govcyDeleteFilePageHandler() {
+    return (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;
+            
+            // ⤵️ 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 res.redirect(govcyResources.constructPageUrl(siteId, conditionResult.redirect));
+            }
+
+            // Validate the field: Only allow upload 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);
+            }
+
+            // Validate if the file input has a label
+            if (!fileInputElement?.params?.label) {
+                return handleMiddlewareError(`File input [${elementName}] does not have a label`, 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) {
+                return handleMiddlewareError(`File input [${elementName}] data not found on this page`, 404, next);
+            }
+
+            // Deep copy page title (so we don’t mutate template)
+            const pageTitle = JSON.parse(JSON.stringify(govcyResources.staticResources.text.deleteFileTitle));
+
+            // Replace label placeholders on page title
+            for (const lang of Object.keys(pageTitle)) {
+                const labelForLang = fileInputElement.params.label[lang] || fileInputElement.params.label.el || ""; 
+                pageTitle[lang] = pageTitle[lang].replace("{{file}}", labelForLang);
+            }
+
+            
+            // Deep copy renderer pageData from
+            let pageData = JSON.parse(JSON.stringify(govcyResources.staticResources.rendererPageData));
+            
+            // Handle isTesting 
+            pageData.site.isTesting = (whatsIsMyEnvironment() === "staging");
+            
+            // Base page template structure
+            let pageTemplate = {
+                sections: [
+                    {
+                        name: "beforeMain",
+                        elements: [govcyResources.staticResources.elements.backLink]
+                    }
+                ]
+            };
+            
+            // Construct page title
+            const pageRadios = {
+                element: "radios",
+                params: {
+                    id: "deleteFile",
+                    name: "deleteFile",
+                    legend: pageTitle,
+                    isPageHeading: true,
+                    classes: "govcy-mb-6",
+                    items:[
+                        {
+                            value: "yes",
+                            text: govcyResources.staticResources.text.deleteYesOption
+                        },
+                        {
+                            value: "no",
+                            text: govcyResources.staticResources.text.deleteNoOption
+                        }
+                    ]
+
+                }
+            };
+            //-------------
+
+            // Construct submit button
+            const formElement = {
+                element: "form",
+                params: {
+                    action: govcyResources.constructPageUrl(siteId, `${pageUrl}/${elementName}/delete-file`,(req.query.route === "review" ? "review" : "")),
+                    method: "POST",
+                    elements: [
+                        pageRadios,
+                        {
+                            element: "button",
+                            params: {
+                                type: "submit",
+                                text: govcyResources.staticResources.text.continue
+                            }
+                        },
+                        govcyResources.csrfTokenInput(req.csrfToken())
+                    ]
+                }
+            };
+            
+            // --------- Handle Validation Errors ---------
+            // Check if validation errors exist in the request
+            const validationErrors = [];
+            let mainElements = [];
+            if (req?.query?.hasError ) {
+                validationErrors.push({
+                    link: '#deleteFile-option-1',
+                    text: govcyResources.staticResources.text.deleteFileValidationError
+                });
+                mainElements.push(govcyResources.errorSummary(validationErrors));
+                formElement.params.elements[0].params.error = govcyResources.staticResources.text.deleteFileValidationError;
+            } 
+            //--------- End Handle Validation Errors ---------
+            
+            // Add elements to the main section, the H1, summary list, the submit button and the JS
+            mainElements.push(formElement, govcyResources.staticResources.elements["govcyFormsJs"]);
+            // Append generated summary list to the page template
+            pageTemplate.sections.push({ name: "main", elements: mainElements });
+            
+            //if user is logged in add he user bane section in the page template
+            if (dataLayer.getUser(req.session)) {
+                pageTemplate.sections.push(govcyResources.userNameSection(dataLayer.getUser(req.session).name)); // Add user name section
+            }
+            
+            //prepare pageData
+            pageData.site = serviceCopy.site;
+            pageData.pageData.title = pageTitle;
+            
+            // Attach processed page data to the request
+            req.processedPage = {
+                pageData: pageData,
+                pageTemplate: pageTemplate
+            };
+            logger.debug("Processed delete file page data:", req.processedPage);
+            next();
+        } catch (error) {
+            return next(error); // Pass error to govcyHttpErrorHandler
+        }
+    };
+}
+
+
+/**
+ * Middleware to handle delete file post form processing
+ * This middleware processes the post, validates the form and handles the file data layer
+ */
+export function govcyDeleteFilePostHandler() {
+  return (req, res, next) => {
+    try {
+      // Extract siteId and pageUrl from request
+      let { siteId, pageUrl, elementName } = req.params; 
+      
+      // get service data
+      let serviceCopy = req.serviceData; 
+
+      // 🔍 Find the page by pageUrl
+      const page = getPageConfigData(serviceCopy, pageUrl);
+
+      // Deep copy pageTemplate to avoid modifying the original
+      const pageTemplateCopy = JSON.parse(JSON.stringify(page.pageTemplate));
+
+      // ----- Conditional logic comes here
+      // Check if the page has conditions and apply logic
+      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 res.redirect(govcyResources.constructPageUrl(siteId, conditionResult.redirect));
+      }
+
+
+      // the page base return url
+      const pageBaseReturnUrl = `http://localhost:3000/${siteId}/${pageUrl}`;
+      
+      //check if input `deleteFile` has a value
+      if (!req?.body?.deleteFile ||
+        (req.body.deleteFile !== "yes" && req.body.deleteFile !== "no")) {
+        logger.debug("⛔️ No deleteFile value provided on POST — skipping form save and redirecting:", req.body);
+        //construct the page url with error 
+        let myUrl = new URL(pageBaseReturnUrl+`/${elementName}/delete-file`);
+        //check if the route is review
+        if (req.query.route === "review") {
+          myUrl.searchParams.set("route", "review");
+        }
+        //set the error flag
+        myUrl.searchParams.set("hasError", "1");
+        
+        //redirect to the same page with error summary (relative path)
+        return res.redirect(govcyResources.constructErrorSummaryUrl(myUrl.pathname + myUrl.search));
+      }
+
+      //if no validation errors
+      if (req.body.deleteFile === "yes") {
+        dataLayer.storePageDataElement(req.session, siteId, pageUrl, elementName, "");
+      } 
+      // construct the page url
+      let myUrl = new URL(pageBaseReturnUrl);
+      //check if the route is review
+      if (req.query.route === "review") {
+        myUrl.searchParams.set("route", "review");
+      }
+
+      // redirect to the page (relative path)
+      res.redirect(myUrl.pathname + myUrl.search);
+    } catch (error) {
+        return next(error);  // Pass error to govcyHttpErrorHandler
+    }
+  };
+}

package/src/middleware/govcyPageHandler.mjs

@@ -91,7 +91,7 @@ export function govcyPageHandler() {
             }
             //--------- End of Handle Validation Errors ---------
             
-            populateFormData(element.params.elements, theData,validationErrors, req.session, siteId, pageUrl, req.globalLang);
+            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));
@@ -120,3 +120,4 @@ export function govcyPageHandler() {
     }
   };
 }
+

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,152 +1,196 @@
 // 🔍 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');
 
 // 🔁 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
+fileInputs.forEach(function(input) {
+  input.addEventListener('change', _uploadFileEventHandler);
+});
+
+
+/**
+ * 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": "Το επιλεγμένο αρχείο πρέπει να είναι μικρότερο από 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
+  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
+  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 } };
+        });
       }
-      // ✅ Update ARIA live region with success message
-      const statusRegion = document.getElementById('_govcy-upload-error');
+      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;
+
+      // 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) {
-        statusRegion.textContent = messages.uploadFailed[lang];
-        setTimeout(() => {
+        setTimeout(function() {
+          statusRegion.textContent = messages.uploadSuccesful[lang];
+        }, 200);
+        setTimeout(function() {
           statusRegion.textContent = '';
-        }, 10000);
+        }, 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];
+      }
+
+      // 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);
       }
-      // // ⚠️ Show an error message if upload fails
-      // alert('❌ Upload failed: ' + (err.response?.data?.error || err.message));
+
+      // 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 = "#viewHref";
+    fileElement.params.deleteHref  = "/" + window._govcySiteId + "/" + window._govcyPageUrl + "/" + elementName + "/delete-file" 
+      + (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
             }
         });
     });

package/src/resources/govcyResources.mjs

@@ -6,6 +6,11 @@ export const staticResources = {
             el: "Υποβολή", 
             tr: "Gönder" 
         },
+        continue: { 
+            en: "Continue", 
+            el: "Συνέχεια", 
+            tr: "Continue" 
+        },
         cancel: { 
             en: "Cancel", 
             el: "Ακύρωση", 
@@ -100,6 +105,41 @@ export const staticResources = {
             en: "We have received your request. ",
             el: "Έχουμε λάβει την αίτησή σας. ",
             tr: "We have received your request. "
+        },
+        fileUploaded : {
+            en: "File uploaded",
+            el: "Το αρχείο ανεβάστηκε",
+            tr: "File uploaded"
+        },
+        fileNotUploaded : {
+            en: "File has not been uploaded. ",
+            el: "Το αρχείο δεν ανεβάστηκε. ",
+            tr: "File has not been uploaded. "
+        },
+        fileYouHaveUploaded : {
+            en: "You have uploaded the file for \"{{file}}\"",
+            el: "Έχετε ανεβάσει το αρχείο \"{{file}}\"",
+            tr: "You have uploaded the file for \"{{file}}\""
+        },
+        deleteFileTitle : {
+            en: "Are you sure you want to delete the file \"{{file}}\"? ",
+            el: "Είστε σίγουροι ότι θέλετε να διαγράψετε το αρχείο \"{{file}}\";",
+            tr: "Are you sure you want to delete the file \"{{file}}\"? "
+        },
+        deleteYesOption: {
+            el:"Ναι, θέλω να διαγράψω το αρχείο",
+            en:"Yes, I want to delete this file",
+            tr:"Yes, I want to delete this file"
+        },
+        deleteNoOption: {
+            el:"Όχι, δεν θέλω να διαγράψω το αρχείο",
+            en:"No, I don't want to delete this file",
+            tr:"No, I don't want to delete this file"
+        },
+        deleteFileValidationError: {
+            en: "Select if you want to delete the file",
+            el: "Επιλέξτε αν θέλετε να διαγράψετε το αρχείο",
+            tr: "Select if you want to delete the filez"
         }
     },
     //remderer sections
@@ -113,9 +153,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="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>`
+                    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 type="module" src="/js/govcyForms.js"></script><script type="module" 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 type="module" src="/js/govcyForms.js"></script><script type="module" 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 type="module" src="/js/govcyForms.js"></script><script type="module" src="/js/govcyFiles.js"></script>`
                 }
             }
         },

package/src/utils/govcyFormHandling.mjs

@@ -6,6 +6,7 @@
  */
 import { ALLOWED_FORM_ELEMENTS } from "./govcyConstants.mjs";
 import * as dataLayer from "./govcyDataLayer.mjs";
+import * as govcyResources from "../resources/govcyResources.mjs";
 
 
 /**
@@ -17,10 +18,15 @@ import * as dataLayer from "./govcyDataLayer.mjs";
  * @param {string} siteId The site ID
  * @param {string} pageUrl The page URL
  * @param {string} lang The language
+ * @param {Object} fileInputElements The file input elements
+ * @param {string} routeParam The route parameter
  */
-export function populateFormData(formElements, theData, validationErrors, store = {}, siteId = "", pageUrl = "", lang = "el") {
+export function populateFormData(formElements, theData, validationErrors, store = {}, siteId = "", pageUrl = "", lang = "el", fileInputElements = null, routeParam = "") {
     const inputElements = ALLOWED_FORM_ELEMENTS;
-    let fileInputElements = {};
+    const isRootCall = !fileInputElements;
+    if (isRootCall) {
+        fileInputElements = {};
+    }
     // Recursively populate form data with session data
     formElements.forEach(element => {
         if (inputElements.includes(element.element)) {
@@ -62,7 +68,9 @@ export function populateFormData(formElements, theData, validationErrors, store
             } 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");
+                // 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";
@@ -71,7 +79,7 @@ export function populateFormData(formElements, theData, validationErrors, store
                     element.params.visuallyHiddenText = element.params.label;
                     // TODO: Also need to set the `view` and `download` URLs 
                     element.params.viewHref = "#viewHref";
-                    element.params.deleteHref  = "#deleteHref";
+                    element.params.deleteHref  = `/${siteId}/${pageUrl}/${fieldName}/delete-file${(routeParam) ? `?route=${routeParam}` : ''}`;
                 } else {
                     // TODO: Ask Andreas how to handle empty file inputs
                     element.params.value = "";
@@ -102,7 +110,7 @@ export function populateFormData(formElements, theData, validationErrors, store
         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, routeParam);
                   
                     // Check if any conditional element has an error and add to the parent "conditionalHasErrors": true
                     if (item.conditionalElements.some(condEl => condEl.params?.error)) {
@@ -113,7 +121,7 @@ export function populateFormData(formElements, theData, validationErrors, store
         }
     });
     // add file input elements's definition in js object
-    if (fileInputElements != {}) {
+    if (isRootCall && Object.keys(fileInputElements).length > 0) {
         const scriptTag = `
         <script type="text/javascript">
             window._govcyFileInputs = ${JSON.stringify(fileInputElements)};
@@ -121,7 +129,7 @@ export function populateFormData(formElements, theData, validationErrors, store
             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-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({
@@ -165,7 +173,7 @@ export function getFormData(elements, formData, store = {}, siteId = "", pageUrl
                         if (item.conditionalElements) {
                             Object.assign(
                                 filteredData,
-                                getFormData(item.conditionalElements, formData)
+                                getFormData(item.conditionalElements, formData, store, siteId, pageUrl)
                             );
                         }
                     });
@@ -184,12 +192,18 @@ export function getFormData(elements, formData, store = {}, siteId = "", pageUrl
             } 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");
+                // 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) {
-                    filteredData[name + "Attachment"] = 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
-                    filteredData[name + "Attachment"] = ""; // or handle as needed
+                    // 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 {

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,13 +180,16 @@ 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
-    dataLayer.storePageDataElement(store, siteId, pageUrl, elementName+"Attachment", {
+    // 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,
     });
@@ -195,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}` : ''),
     };
   }
@@ -219,11 +234,12 @@ function containsFileInput(elements = [], targetName) {
   for (const el of elements) {
     // ✅ Direct file input match
     if (el.element === 'fileInput' && el.params?.name === targetName) {
-      return true;
+      return el;
     }
     // 🔁 Recurse into nested elements (e.g. groups, conditionals)
     if (Array.isArray(el?.params?.elements)) {
-      if (containsFileInput(el.params.elements, targetName)) return true;
+      const nestedMatch = containsFileInput(el.params.elements, targetName);
+      if (nestedMatch) return nestedMatch; // ← propagate the found element
     }
 
     // 🎯 Special case: conditional radios/checkboxes
@@ -233,7 +249,8 @@ function containsFileInput(elements = [], targetName) {
     ) {
       for (const item of el.params.items) {
         if (Array.isArray(item?.conditionalElements)) {
-          if (containsFileInput(item.conditionalElements, targetName)) return true;
+          const match = containsFileInput(item.conditionalElements, targetName);
+          if (match) return match; // ← propagate the found element
         }
       }
     }
@@ -249,16 +266,24 @@ function containsFileInput(elements = [], targetName) {
  * @param {string} elementName The name of the element to check
  * @return {boolean} True if a fileInput exists, false otherwise
  */
-function pageContainsFileInput(pageTemplate, elementName) {
+export function pageContainsFileInput(pageTemplate, elementName) {
   const sections = pageTemplate?.sections || [];
-  return sections.some(section =>
-    section?.elements?.some(el =>
-      el.element === 'form' &&
-      containsFileInput(el.params?.elements, elementName)
-    )
-  );
+
+  for (const section of sections) {
+    for (const el of section?.elements || []) {
+      if (el.element === 'form') {
+        const match = containsFileInput(el.params?.elements, elementName);
+        if (match) {
+          return match; // ← return the actual element
+        }
+      }
+    }
+  }
+
+  return null; // no match found
 }
 
+
 /**
  * Validates magic bytes against expected mimetype
  * @param {Buffer} buffer 

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,8 +263,9 @@ 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`] || ""
+        // 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
@@ -313,7 +314,9 @@ export function validateFormElements(elements, formData, pageUrl) {
                     .filter(Boolean) // Remove empty values
                     .join("-") // Join remaining parts
                   : (conditionalElement.element === "fileInput") // Handle fileInput
-                      ? formData[`${conditionalElement.params.name}Attachment`] || ""
+                      // 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`