Merge pull request #71 from episerver/feature/AFORM-3867-add-prev-upl…

…oaded-file Add previous posted file to FileUploadElement
episerver · Jan 4, 2024 · 4ab5fdf · 4ab5fdf
2 parents e0cc4f3 + d9afc21
commit 4ab5fdf
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/src/@episerver/forms-react/src/components/elements/FileUploadElementBlock.tsx b/src/@episerver/forms-react/src/components/elements/FileUploadElementBlock.tsx
@@ -1,8 +1,9 @@
-import { FileUpload } from "@episerver/forms-sdk"
+import { FileUpload, FormContainer, FormStorage, isNullOrEmpty } from "@episerver/forms-sdk"
 import React, { useMemo } from "react";
 import ElementWrapper from "./shared/ElementWrapper";
 import { useElement } from "../../hooks/useElement";
 import { ElementCaption, ValidationMessage } from "./shared";
+import { useForms } from "../../context/store";
 
 export interface FileUploadElementBlockProps {
     element: FileUpload
@@ -17,6 +18,12 @@ export const FileUploadElementBlock = (props: FileUploadElementBlockProps) => {
     }).join(",") : "";
     const { isVisible, validationResults, extraAttr, validatorClasses, elementRef } = elementContext;
 
+    const formContext = useForms();
+    const form = formContext?.formContainer as FormContainer;
+    const formStorage = new FormStorage(form);
+    const data = formStorage.loadFormDataFromStorage();
+    const prevFilenames =  data.find(fe => fe.elementKey === element.key)?.prevValue
+
     return useMemo(()=>(
         <ElementWrapper className={`FormFileUpload ${validatorClasses}`} validationResults={validationResults} isVisible={isVisible}>
             <ElementCaption element={element} />
@@ -33,9 +40,12 @@ export const FileUploadElementBlock = (props: FileUploadElementBlockProps) => {
                 onChange={handleChange}
                 ref={elementRef}
             />
-            <div className="FormFileUpload__PostedFile"></div>
+
+            <div className="FormFileUpload__PostedFile">
+            (Previous posted file(s): {prevFilenames} )
+            </div>
 
             <ValidationMessage element={element} validationResults={validationResults} />
         </ElementWrapper>
     ),[isVisible, validationResults]);
-}
+}
diff --git a/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts b/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts
@@ -140,11 +140,16 @@ export class FormSubmitter {
                             formData.append(key + "_file_" + idx, ofile);
                         }
 
-                        //always send file name to server if existed to handle case upload file then click back
-                        fileNames += files[idx].name + "|"; // charactor | cannot be used in filename and then is safe for splitting later
+                        // always send file name to server if existed to handle case upload file then click back
+                        // charactor | cannot be used in filename and then is safe for splitting later
+                        if(idx > 0){
+                            fileNames += " | "
+                        }
+
+                        fileNames += files[idx].name; 
                     }
                     formData.append(key, fileNames);
-                    data.value = fileNames
+                    data.prevValue = fileNames
                 }
                 else {
                     formData.append(key, data.value);
@@ -153,8 +158,8 @@ export class FormSubmitter {
 
             // Save data to session storage
             let formStorage = new FormStorage(this._form);
-            let currentData = formStorage.loadFormDataFromStorage()
-            let dataCombined = this.combineData(currentData, model.submissionData)
+            let currentData = formStorage.loadFormDataFromStorage();
+            let dataCombined = this.combineData(currentData, model.submissionData);
             formStorage.saveFormDataToStorage(dataCombined);
 
             //init a request and call ajax

diff --git a/src/@episerver/forms-sdk/src/models/states/FormSubmission.ts b/src/@episerver/forms-sdk/src/models/states/FormSubmission.ts
@@ -4,4 +4,5 @@
 export interface FormSubmission {
     elementKey: string
     value: any
+    prevValue?: any
 }