Merge pull request #31 from episerver/bugfix/AFORM-3653-FileUpload-ca…

…nnot-validate Fix FileUpload element cannot validate
episerver · Nov 8, 2023 · b2121fe · b2121fe
2 parents 9278992 + 232ce54
commit b2121fe
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 26 deletions.
diff --git a/src/@optimizely/forms-react/src/components/elements/FileUploadElementBlock.tsx b/src/@optimizely/forms-react/src/components/elements/FileUploadElementBlock.tsx
@@ -10,13 +10,12 @@ export interface FileUploadElementBlockProps {
 
 export const FileUploadElementBlock = (props: FileUploadElementBlockProps) => {
     const { element } = props;
-    const { elementContext, extraAttr, validatorClasses, handleChange, handleBlur, checkVisible } = useElement(element);
-    let allowedTypes = ""
-    element.properties.fileTypes && element.properties.fileTypes.split(",").forEach(ext => {
-        if (ext[0] != ".")
-            allowedTypes += "."
-        allowedTypes += ext + ","
-    });
+    const { elementContext, extraAttr, validatorClasses, handleChange, checkVisible } = useElement(element);
+    let allowedTypes = element.properties.fileTypes ? element.properties.fileTypes.split(",").map((ext) => {
+        ext = ext.trim();
+        return (ext[0] != ".") ? `.${ext}` : ext;
+    }).join(",") : "";
+
     return (
         <ElementWrapper className={`FormFileUpload ${validatorClasses}`} isVisible={checkVisible()}>
             <ElementCaption element={element} />
@@ -29,9 +28,8 @@ export const FileUploadElementBlock = (props: FileUploadElementBlockProps) => {
                 multiple={element.properties.allowMultiple}
                 className="FormFileUpload__Input"
                 accept={allowedTypes}
-                aria-describedby={element.displayName + "_desc"}
+                aria-describedby={element.key + "_desc"}
                 onChange={handleChange}
-                onBlur={handleBlur}
             />
             <div className="FormFileUpload__PostedFile"></div>
 

diff --git a/src/@optimizely/forms-react/src/hooks/useElement.ts b/src/@optimizely/forms-react/src/hooks/useElement.ts
@@ -72,10 +72,26 @@ export const useElement = (element: FormElementBase) => {
             isDependenciesSatisfied
         } as ElementContext);
     },[element.key]);
+
+    const dispatchUpdateValidation = (validationResults: FormValidationResult[]) => {
+        dispatch({
+            type: ActionType.UpdateValidation,
+            elementKey: element.key,
+            validationResults
+        });
+    }
+    const dispatchUpdateValue = (value: any) => {
+        dispatch({
+            type: ActionType.UpdateValue,
+            elementKey: element.key,
+            value
+        });
+    }
 
     const handleChange = (e: any) => {
-        const {name, value, type, checked} = e.target;
+        const {name, value, type, checked, files} = e.target;
         let submissionValue = value;
+        let validationResults = [...elementContext.validationResults];
 
         //get selected value for choice
         if(/checkbox|radio/.test(type)){
@@ -92,43 +108,43 @@ export const useElement = (element: FormElementBase) => {
 
             submissionValue = arrayValue.length > 0 ? arrayValue.join(",") : null;
         }
+
+        if(/file/.test(type)){
+            submissionValue = files;
+            validationResults = doValidate(name, files);
+            dispatchUpdateValidation(validationResults);
+        }
 
         //update form context
-        dispatch({
-            type: ActionType.UpdateValue,
-            elementKey: name,
-            value: submissionValue
-        });
+        dispatchUpdateValue(submissionValue);
 
         //update element state
         setElementContext({
             ...elementContext, 
-            value: submissionValue
+            value: submissionValue,
+            validationResults
         } as ElementContext);
     }
+
     const handleBlur = (e: any) => {
         const {name} = e.target;
         //call validation from form-sdk
-        doValidate(name);
+        let validationResults = doValidate(name, elementContext.value);
 
         //call dependencies from form-sdk
-    }
-
-    const doValidate = (elementKey: string) => {
-        let validationResults = formValidation.validate(elementContext.value);
 
         //update form context
-        dispatch({
-            type: ActionType.UpdateValidation,
-            elementKey,
-            validationResults
-        });
+        dispatchUpdateValidation(validationResults);
 
         //update element state
         setElementContext({
             ...elementContext, 
             validationResults
         } as ElementContext);
+    }
+
+    const doValidate = (elementKey: string, value: any) => {
+        let validationResults = formValidation.validate(value);
 
         let isValidationFail = !isNull(validationResults) && validationResults.some(r => !r.valid);
         let arrClass = validatorClasses.current.split(" ");
@@ -144,6 +160,8 @@ export const useElement = (element: FormElementBase) => {
             }
         }
         validatorClasses.current = arrClass.join(" ");
+
+        return validationResults;
     }
 
     const checkVisible = (): boolean => {