@pareto-engineering/design-system 4.9.3 → 4.10.0

package/dist/cjs/b/Button/styles.scss

@@ -124,6 +124,7 @@ $default-animation-time: .31s;
   }
 
   &.#{bem.$modifier-simple} {
+    --stroke-color: var(--x, var(--#{$default-color}));
     background: transparent;
     border: 1px solid transparent;
     color: var(--x, var(--#{$default-color}));

package/dist/cjs/g/FormBuilder/FormBuilder.js

@@ -34,8 +34,8 @@ const FormBuilder = _ref => {
     formBuilderId,
     onBuilderFormSave,
     onBuilderError,
-    onRendererError,
     onRendererFormSave,
+    onFileUpload,
     onBuilderValidate,
     initialBuilderValues,
     fileUploadStatus,
@@ -62,9 +62,9 @@ const FormBuilder = _ref => {
     onSave: onRendererFormSave,
     readOnly: readOnly,
     shouldSubmit: shouldSubmit,
-    onError: onRendererError,
     fileUploadStatus: fileUploadStatus,
-    handleFileDelete: handleFileDelete
+    handleFileDelete: handleFileDelete,
+    onFileUpload: onFileUpload
   }));
 };
 FormBuilder.propTypes = {

package/dist/cjs/g/FormBuilder/common/Renderer/Renderer.js

@@ -18,28 +18,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /* @pareto-engineering/generator-front 1.1.1-alpha.2 */ // Local Definitions
 const baseClassName = _exports.default.base;
 const componentClassName = 'renderer';
-const reconstructFormDataWithValues = (formData, values) => {
-  const valuesMap = {};
-  Object.keys(values).forEach(async key => {
-    if (key.includes('files')) {
-      const files = values[key].map(file => file instanceof File ? URL.createObjectURL(file) : file);
-      valuesMap[key] = files;
-    } else {
-      valuesMap[key] = values[key];
-    }
-  });
-  const newData = {
-    ...formData,
-    sections: formData.sections.map(section => ({
-      ...section,
-      inputs: section.inputs.map(input => ({
-        ...input,
-        value: valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value
-      }))
-    }))
-  };
-  return newData;
-};
 const validate = (currentSectionIndex, formData, values) => {
   const errors = {};
   const hasAtLeastOneValue = Object.keys(values).some(valueKey => {
@@ -58,6 +36,25 @@ const validate = (currentSectionIndex, formData, values) => {
   });
   return errors;
 };
+const reconstructFormDataWithValues = (formData, values) => {
+  const valuesMap = {};
+  Object.keys(values).forEach(async key => {
+    if (!key.includes('files')) {
+      valuesMap[key] = values[key];
+    }
+  });
+  const newData = {
+    ...formData,
+    sections: formData.sections.map(section => ({
+      ...section,
+      inputs: section.inputs.map(input => ({
+        ...input,
+        value: valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value
+      }))
+    }))
+  };
+  return newData;
+};
 
 /**
  * This is the component description.
@@ -70,15 +67,18 @@ const Renderer = _ref => {
     formData,
     readOnly,
     onSave,
-    onError,
     shouldSubmit,
     fileUploadStatus,
-    handleFileDelete
+    handleFileDelete,
+    onFileUpload,
+    shouldUpdateInputStateInRealTime = true
     // ...otherProps
   } = _ref;
   const [currentSectionIndex, setCurrentSectionIndex] = (0, _react.useState)(0);
   const [sectionHistory, setSectionHistory] = (0, _react.useState)([]);
-  const [updatedFormData, setUpdatedFormData] = (0, _react.useState)(formData);
+  const [updatedFormData, setUpdatedFormData] = (0, _react.useState)({
+    ...formData
+  });
   (0, _react.useEffect)(() => {
     setUpdatedFormData(formData);
   }, [formData]);
@@ -118,6 +118,9 @@ const Renderer = _ref => {
     }
   };
   const isSubmit = currentSectionIndex === updatedFormData.sections.length - 1 || updatedFormData.sections[currentSectionIndex].navigation.nextSection === 'submit';
+  const ref = (0, _react.useRef)(null);
+  const currentSectionInputs = updatedFormData.sections[currentSectionIndex].inputs;
+  const hasErrorsOnInitialRender = currentSectionInputs.some(input => input.required && !ref.current?.values[input.name] || ref.current?.errors[input.name]);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -125,31 +128,28 @@ const Renderer = _ref => {
   }, /*#__PURE__*/React.createElement(_formik.Formik, {
     initialValues: initialValues,
     onSubmit: handleSubmit,
-    validate: values => validate(currentSectionIndex, formData, values)
+    validate: values => validate(currentSectionIndex, updatedFormData, values),
+    innerRef: ref
   }, _ref2 => {
     let {
       values,
       errors
     } = _ref2;
     (0, _react.useEffect)(() => {
-      const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values);
-      setUpdatedFormData(formDataWithValues);
-      onSave?.(formDataWithValues);
+      if (shouldUpdateInputStateInRealTime) {
+        const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values);
+        onSave?.(formDataWithValues);
+      }
     }, [values]);
-    (0, _react.useEffect)(() => {
-      onError?.({
-        errors,
-        values
-      });
-    }, [errors, values]);
     const hasErrors = Object.keys(errors).length > 0;
     return /*#__PURE__*/React.createElement(_formik.Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(_common.Section, _extends({
       key: `${section.title}`
     }, section, {
       readOnly: readOnly,
-      setUpdatedFormData: setUpdatedFormData,
       fileUploadStatus: fileUploadStatus,
-      handleFileDelete: handleFileDelete
+      handleFileDelete: handleFileDelete,
+      onFileUpload: onFileUpload,
+      sectionIndex: sectionIndex
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
     }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(_b.Button, {
@@ -164,7 +164,7 @@ const Renderer = _ref => {
       color: "interactive",
       isGradient: true,
       type: "submit",
-      disabled: hasErrors
+      disabled: hasErrors || hasErrorsOnInitialRender
     }, isSubmit ? 'Submit' : 'Next')));
   }));
 };

package/dist/cjs/g/FormBuilder/common/Renderer/common/Section/Section.js

@@ -15,6 +15,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /* eslint-disable no-alert */ /* @pareto-engineering/generator-front 1.1.1-alpha.2 */ // Local Definitions
 const baseClassName = _exports.default.base;
 const componentClassName = 'section';
+const fileTypeMapper = {
+  VID: 'Video',
+  TXT: 'Text',
+  IMG: 'Image',
+  PDF: 'PDF',
+  AUD: 'Audio',
+  FILE: 'Generic'
+};
 
 /**
  * This is the component description.
@@ -29,7 +37,9 @@ const Section = _ref => {
     inputs,
     readOnly,
     fileUploadStatus,
-    handleFileDelete
+    handleFileDelete,
+    onFileUpload,
+    sectionIndex
     // ...otherProps
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
@@ -41,13 +51,29 @@ const Section = _ref => {
   }, title), /*#__PURE__*/React.createElement(_.ExpandableLexicalPreview, {
     nodes: description,
     name: "instructions"
-  }), inputs?.map(input => /*#__PURE__*/React.createElement(_f.FormInput, _extends({
-    key: input.name
-  }, input, {
-    disabled: readOnly,
-    uploadStatus: fileUploadStatus,
-    handleFileDelete: handleFileDelete
-  }))));
+  }), inputs?.map((input, inputIndex) => {
+    const isFileInput = input.type === 'file';
+    return /*#__PURE__*/React.createElement(_f.FormInput, _extends({
+      key: input.name
+    }, input, {
+      disabled: readOnly
+    }, isFileInput && {
+      uploadStatus: fileUploadStatus,
+      handleFileDelete,
+      onChange: files => {
+        const filesToUpload = files?.filter(file => file instanceof File).map(file => ({
+          file,
+          name: file.name,
+          mimeType: file.type,
+          type: fileTypeMapper[(0, _f.getFileType)(file)] || 'Generic',
+          title: file.name,
+          sectionIndex,
+          inputIndex
+        }));
+        onFileUpload(filesToUpload);
+      }
+    }));
+  }));
 };
 Section.propTypes = {
   /**

package/dist/es/b/Button/styles.scss

@@ -124,6 +124,7 @@ $default-animation-time: .31s;
   }
 
   &.#{bem.$modifier-simple} {
+    --stroke-color: var(--x, var(--#{$default-color}));
     background: transparent;
     border: 1px solid transparent;
     color: var(--x, var(--#{$default-color}));

package/dist/es/g/FormBuilder/FormBuilder.js

@@ -24,8 +24,8 @@ const FormBuilder = ({
   formBuilderId,
   onBuilderFormSave,
   onBuilderError,
-  onRendererError,
   onRendererFormSave,
+  onFileUpload,
   onBuilderValidate,
   initialBuilderValues,
   fileUploadStatus,
@@ -52,9 +52,9 @@ const FormBuilder = ({
     onSave: onRendererFormSave,
     readOnly: readOnly,
     shouldSubmit: shouldSubmit,
-    onError: onRendererError,
     fileUploadStatus: fileUploadStatus,
-    handleFileDelete: handleFileDelete
+    handleFileDelete: handleFileDelete,
+    onFileUpload: onFileUpload
   }));
 };
 FormBuilder.propTypes = {

package/dist/es/g/FormBuilder/common/Renderer/Renderer.js

@@ -1,7 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
 import * as React from 'react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Formik, Form } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -13,28 +13,6 @@ import "./styles.scss";
 import { Section } from "./common";
 const baseClassName = styleNames.base;
 const componentClassName = 'renderer';
-const reconstructFormDataWithValues = (formData, values) => {
-  const valuesMap = {};
-  Object.keys(values).forEach(async key => {
-    if (key.includes('files')) {
-      const files = values[key].map(file => file instanceof File ? URL.createObjectURL(file) : file);
-      valuesMap[key] = files;
-    } else {
-      valuesMap[key] = values[key];
-    }
-  });
-  const newData = {
-    ...formData,
-    sections: formData.sections.map(section => ({
-      ...section,
-      inputs: section.inputs.map(input => ({
-        ...input,
-        value: valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value
-      }))
-    }))
-  };
-  return newData;
-};
 const validate = (currentSectionIndex, formData, values) => {
   const errors = {};
   const hasAtLeastOneValue = Object.keys(values).some(valueKey => {
@@ -53,6 +31,25 @@ const validate = (currentSectionIndex, formData, values) => {
   });
   return errors;
 };
+const reconstructFormDataWithValues = (formData, values) => {
+  const valuesMap = {};
+  Object.keys(values).forEach(async key => {
+    if (!key.includes('files')) {
+      valuesMap[key] = values[key];
+    }
+  });
+  const newData = {
+    ...formData,
+    sections: formData.sections.map(section => ({
+      ...section,
+      inputs: section.inputs.map(input => ({
+        ...input,
+        value: valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value
+      }))
+    }))
+  };
+  return newData;
+};
 
 /**
  * This is the component description.
@@ -64,15 +61,18 @@ const Renderer = ({
   formData,
   readOnly,
   onSave,
-  onError,
   shouldSubmit,
   fileUploadStatus,
-  handleFileDelete
+  handleFileDelete,
+  onFileUpload,
+  shouldUpdateInputStateInRealTime = true
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
   const [sectionHistory, setSectionHistory] = useState([]);
-  const [updatedFormData, setUpdatedFormData] = useState(formData);
+  const [updatedFormData, setUpdatedFormData] = useState({
+    ...formData
+  });
   useEffect(() => {
     setUpdatedFormData(formData);
   }, [formData]);
@@ -112,6 +112,9 @@ const Renderer = ({
     }
   };
   const isSubmit = currentSectionIndex === updatedFormData.sections.length - 1 || updatedFormData.sections[currentSectionIndex].navigation.nextSection === 'submit';
+  const ref = useRef(null);
+  const currentSectionInputs = updatedFormData.sections[currentSectionIndex].inputs;
+  const hasErrorsOnInitialRender = currentSectionInputs.some(input => input.required && !ref.current?.values[input.name] || ref.current?.errors[input.name]);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -119,30 +122,27 @@ const Renderer = ({
   }, /*#__PURE__*/React.createElement(Formik, {
     initialValues: initialValues,
     onSubmit: handleSubmit,
-    validate: values => validate(currentSectionIndex, formData, values)
+    validate: values => validate(currentSectionIndex, updatedFormData, values),
+    innerRef: ref
   }, ({
     values,
     errors
   }) => {
     useEffect(() => {
-      const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values);
-      setUpdatedFormData(formDataWithValues);
-      onSave?.(formDataWithValues);
+      if (shouldUpdateInputStateInRealTime) {
+        const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values);
+        onSave?.(formDataWithValues);
+      }
     }, [values]);
-    useEffect(() => {
-      onError?.({
-        errors,
-        values
-      });
-    }, [errors, values]);
     const hasErrors = Object.keys(errors).length > 0;
     return /*#__PURE__*/React.createElement(Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(Section, _extends({
       key: `${section.title}`
     }, section, {
       readOnly: readOnly,
-      setUpdatedFormData: setUpdatedFormData,
       fileUploadStatus: fileUploadStatus,
-      handleFileDelete: handleFileDelete
+      handleFileDelete: handleFileDelete,
+      onFileUpload: onFileUpload,
+      sectionIndex: sectionIndex
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
     }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(Button, {
@@ -157,7 +157,7 @@ const Renderer = ({
       color: "interactive",
       isGradient: true,
       type: "submit",
-      disabled: hasErrors
+      disabled: hasErrors || hasErrorsOnInitialRender
     }, isSubmit ? 'Submit' : 'Next')));
   }));
 };

package/dist/es/g/FormBuilder/common/Renderer/common/Section/Section.js

@@ -6,11 +6,19 @@ import PropTypes from 'prop-types';
 
 // Local Definitions
 
-import { FormInput } from "../../../../../../f";
+import { FormInput, getFileType } from "../../../../../../f";
 import { ExpandableLexicalPreview } from "../../../../..";
 import styleNames from '@pareto-engineering/bem/exports';
 const baseClassName = styleNames.base;
 const componentClassName = 'section';
+const fileTypeMapper = {
+  VID: 'Video',
+  TXT: 'Text',
+  IMG: 'Image',
+  PDF: 'PDF',
+  AUD: 'Audio',
+  FILE: 'Generic'
+};
 
 /**
  * This is the component description.
@@ -24,7 +32,9 @@ const Section = ({
   inputs,
   readOnly,
   fileUploadStatus,
-  handleFileDelete
+  handleFileDelete,
+  onFileUpload,
+  sectionIndex
   // ...otherProps
 }) => /*#__PURE__*/React.createElement("div", {
   id: id,
@@ -35,13 +45,29 @@ const Section = ({
 }, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
   nodes: description,
   name: "instructions"
-}), inputs?.map(input => /*#__PURE__*/React.createElement(FormInput, _extends({
-  key: input.name
-}, input, {
-  disabled: readOnly,
-  uploadStatus: fileUploadStatus,
-  handleFileDelete: handleFileDelete
-}))));
+}), inputs?.map((input, inputIndex) => {
+  const isFileInput = input.type === 'file';
+  return /*#__PURE__*/React.createElement(FormInput, _extends({
+    key: input.name
+  }, input, {
+    disabled: readOnly
+  }, isFileInput && {
+    uploadStatus: fileUploadStatus,
+    handleFileDelete,
+    onChange: files => {
+      const filesToUpload = files?.filter(file => file instanceof File).map(file => ({
+        file,
+        name: file.name,
+        mimeType: file.type,
+        type: fileTypeMapper[getFileType(file)] || 'Generic',
+        title: file.name,
+        sectionIndex,
+        inputIndex
+      }));
+      onFileUpload(filesToUpload);
+    }
+  }));
+}));
 Section.propTypes = {
   /**
    * The HTML id for this element

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.9.3",
+  "version": "4.10.0",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -83,5 +83,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "d69af6b2eea2c7f0897d665c3d13e3dda118e293"
+  "gitHead": "a7230fcb13b180d33c831ed413f8fc039e95fc89"
 }

package/src/ui/b/Button/styles.scss

@@ -124,6 +124,7 @@ $default-animation-time: .31s;
   }
 
   &.#{bem.$modifier-simple} {
+    --stroke-color: var(--x, var(--#{$default-color}));
     background: transparent;
     border: 1px solid transparent;
     color: var(--x, var(--#{$default-color}));

package/src/ui/g/FormBuilder/FormBuilder.jsx

@@ -29,8 +29,8 @@ const FormBuilder = ({
   formBuilderId,
   onBuilderFormSave,
   onBuilderError,
-  onRendererError,
   onRendererFormSave,
+  onFileUpload,
   onBuilderValidate,
   initialBuilderValues,
   fileUploadStatus,
@@ -75,9 +75,9 @@ const FormBuilder = ({
           onSave={onRendererFormSave}
           readOnly={readOnly}
           shouldSubmit={shouldSubmit}
-          onError={onRendererError}
           fileUploadStatus={fileUploadStatus}
           handleFileDelete={handleFileDelete}
+          onFileUpload={onFileUpload}
         />
       )}
     </div>

package/src/ui/g/FormBuilder/common/Renderer/Renderer.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
 import * as React from 'react'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 
 import { Formik, Form } from 'formik'
 
@@ -21,31 +21,6 @@ const baseClassName = styleNames.base
 
 const componentClassName = 'renderer'
 
-const reconstructFormDataWithValues = (formData, values) => {
-  const valuesMap = {}
-  Object.keys(values).forEach(async (key) => {
-    if (key.includes('files')) {
-      const files = values[key].map((file) => (
-        file instanceof File ? URL.createObjectURL(file) : file
-      ))
-      valuesMap[key] = files
-    } else {
-      valuesMap[key] = values[key]
-    }
-  })
-  const newData = {
-    ...formData,
-    sections:formData.sections.map((section) => ({
-      ...section,
-      inputs:section.inputs.map((input) => ({
-        ...input,
-        value:valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value,
-      })),
-    })),
-  }
-  return newData
-}
-
 const validate = (currentSectionIndex, formData, values) => {
   const errors = {}
 
@@ -68,6 +43,26 @@ const validate = (currentSectionIndex, formData, values) => {
   return errors
 }
 
+const reconstructFormDataWithValues = (formData, values) => {
+  const valuesMap = {}
+  Object.keys(values).forEach(async (key) => {
+    if (!key.includes('files')) {
+      valuesMap[key] = values[key]
+    }
+  })
+  const newData = {
+    ...formData,
+    sections:formData.sections.map((section) => ({
+      ...section,
+      inputs:section.inputs.map((input) => ({
+        ...input,
+        value:valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value,
+      })),
+    })),
+  }
+  return newData
+}
+
 /**
  * This is the component description.
  */
@@ -78,15 +73,16 @@ const Renderer = ({
   formData,
   readOnly,
   onSave,
-  onError,
   shouldSubmit,
   fileUploadStatus,
   handleFileDelete,
+  onFileUpload,
+  shouldUpdateInputStateInRealTime = true,
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0)
   const [sectionHistory, setSectionHistory] = useState([])
-  const [updatedFormData, setUpdatedFormData] = useState(formData)
+  const [updatedFormData, setUpdatedFormData] = useState({ ...formData })
 
   useEffect(() => {
     setUpdatedFormData(formData)
@@ -135,6 +131,13 @@ const Renderer = ({
   const isSubmit = currentSectionIndex === updatedFormData.sections.length - 1
   || updatedFormData.sections[currentSectionIndex].navigation.nextSection === 'submit'
 
+  const ref = useRef(null)
+
+  const currentSectionInputs = updatedFormData.sections[currentSectionIndex].inputs
+  const hasErrorsOnInitialRender = currentSectionInputs
+    .some((input) => (input.required && !ref.current?.values[input.name])
+    || ref.current?.errors[input.name])
+
   return (
     <div
       id={id}
@@ -151,21 +154,18 @@ const Renderer = ({
       <Formik
         initialValues={initialValues}
         onSubmit={handleSubmit}
-        validate={(values) => validate(currentSectionIndex, formData, values)}
+        validate={(values) => validate(currentSectionIndex, updatedFormData, values)}
+        innerRef={ref}
       >
         {({ values, errors }) => {
           useEffect(() => {
-            const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values)
-            setUpdatedFormData(formDataWithValues)
-            onSave?.(formDataWithValues)
+            if (shouldUpdateInputStateInRealTime) {
+              const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values)
+              onSave?.(formDataWithValues)
+            }
           }, [values])
 
-          useEffect(() => {
-            onError?.({ errors, values })
-          }, [errors, values])
-
           const hasErrors = Object.keys(errors).length > 0
-
           return (
             <Form>
               {updatedFormData.sections.map((section, sectionIndex) => (
@@ -174,9 +174,10 @@ const Renderer = ({
                   key={`${section.title}`}
                   {...section}
                   readOnly={readOnly}
-                  setUpdatedFormData={setUpdatedFormData}
                   fileUploadStatus={fileUploadStatus}
                   handleFileDelete={handleFileDelete}
+                  onFileUpload={onFileUpload}
+                  sectionIndex={sectionIndex}
                 />
                 )
               ))}
@@ -197,7 +198,7 @@ const Renderer = ({
                   )
                 }
                 {(!isSubmit || shouldSubmit) && (
-                  <Button color="interactive" isGradient type="submit" disabled={hasErrors}>
+                  <Button color="interactive" isGradient type="submit" disabled={hasErrors || hasErrorsOnInitialRender}>
                     {isSubmit ? 'Submit' : 'Next'}
                   </Button>
                 )}

package/src/ui/g/FormBuilder/common/Renderer/common/Section/Section.jsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types'
 
 // Local Definitions
 
-import { FormInput } from 'ui/f'
+import { FormInput, getFileType } from 'ui/f'
 
 import { ExpandableLexicalPreview } from 'ui/g'
 
@@ -16,6 +16,15 @@ const baseClassName = styleNames.base
 
 const componentClassName = 'section'
 
+const fileTypeMapper = {
+  VID :'Video',
+  TXT :'Text',
+  IMG :'Image',
+  PDF :'PDF',
+  AUD :'Audio',
+  FILE:'Generic',
+}
+
 /**
  * This is the component description.
  */
@@ -29,6 +38,8 @@ const Section = ({
   readOnly,
   fileUploadStatus,
   handleFileDelete,
+  onFileUpload,
+  sectionIndex,
   // ...otherProps
 }) => (
   <div
@@ -49,15 +60,35 @@ const Section = ({
       nodes={description}
       name="instructions"
     />
-    {inputs?.map((input) => (
-      <FormInput
-        key={input.name}
-        {...input}
-        disabled={readOnly}
-        uploadStatus={fileUploadStatus}
-        handleFileDelete={handleFileDelete}
-      />
-    ))}
+    {inputs?.map((input, inputIndex) => {
+      const isFileInput = input.type === 'file'
+      return (
+        <FormInput
+          key={input.name}
+          {...input}
+          disabled={readOnly}
+          {...(isFileInput && {
+            uploadStatus:fileUploadStatus,
+            handleFileDelete,
+            onChange    :(files) => {
+              const filesToUpload = files
+                ?.filter((file) => file instanceof File)
+                .map((file) => ({
+                  file,
+                  name    :file.name,
+                  mimeType:file.type,
+                  type    :fileTypeMapper[getFileType(file)] || 'Generic',
+                  title   :file.name,
+                  sectionIndex,
+                  inputIndex,
+                }))
+
+              onFileUpload(filesToUpload)
+            },
+          })}
+        />
+      )
+    })}
   </div>
 )
 

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -12416,7 +12416,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  about 2 years ago
+  over 2 years ago
 </p>
 `;