diff --git a/src/@episerver/forms-react/src/components/elements/FileUploadElementBlock.tsx b/src/@episerver/forms-react/src/components/elements/FileUploadElementBlock.tsx index 948625e..be0ab75 100644 --- 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(()=>( @@ -33,9 +40,12 @@ export const FileUploadElementBlock = (props: FileUploadElementBlockProps) => { onChange={handleChange} ref={elementRef} /> -
+ +
+ (Previous posted file(s): {prevFilenames} ) +
),[isVisible, validationResults]); -} \ No newline at end of file +} diff --git a/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts b/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts index 8cd0f33..ff25375 100644 --- 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 index 5ab107a..0c115d1 100644 --- 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 } \ No newline at end of file