Work in progress

Author: oddevan

components/molecules/GravityForm/Fields/Fields.js

@@ -1,6 +1,9 @@
 import PropTypes from 'prop-types'
 import * as GfFields from '.'
 
+import {Field} from 'formik'
+import InputError from '@/components/atoms/Inputs/InputError'
+
 /**
  * Render the Fields component.
  *
@@ -42,6 +45,10 @@ export default function Fields({fields}) {
               fieldToRender = <GfFields.Text {...field.node} key={id} />
               break
 
+            case 'fileupload':
+              fieldToRender = <GfFields.File {...field.node} key={id} />
+              break
+
             default:
               fieldToRender = (
                 <pre key={id}>

components/molecules/GravityForm/Fields/File.js

@@ -0,0 +1,72 @@
+import PropTypes from 'prop-types'
+import {getGfFieldId, getGfHiddenClassName} from '@/functions/gravityForms'
+import {Field} from 'formik'
+import InputError from '@/components/atoms/Inputs/InputError'
+import styles from '@/components/atoms/Inputs/Text/Text.module.css'
+import cn from 'classnames'
+
+/**
+ * Render GravityForms File field component.
+ *
+ * @param {object}        props               GravityForm Select field as props.
+ * @param {string}        props.className     GravityForm field wrapper class.
+ * @param {string}        props.description   GravityForm field description.
+ * @param {string|number} props.id            GravityForm field id.
+ * @param {boolean}       props.isRequired    GravityForm field is required.
+ * @param {string}        props.label         GravityForm field label.
+ * @param {Array}         props.selectChoices GravityForm field selection options.
+ * @param {boolean}       props.visibility    GravityForm field visibility.
+ * @return {Element}                          The Select component.
+ */
+export default function File({className, description, id, isRequired, label}) {
+  const fieldId = getGfFieldId(id)
+
+  // const [upload, setUpload] = useState([])
+
+  return (
+    <div className={cn(styles.text, className)}>
+      {label && (
+        <label htmlFor={id} required={isRequired}>
+          {label}
+        </label>
+      )}
+      <Field
+        aria-required={isRequired}
+        id={fieldId}
+        name={fieldId}
+        required={isRequired}
+        type="file"
+        render={({field, form}) => (
+            <input
+              {...field}
+              type="file"
+              onChange={e => {
+                form.setFieldValue(fieldId, e.currentTarget.files[0])
+              }}
+            />
+          )}
+      />
+      {/* <input
+        id={fieldId}
+        name={fieldId}
+        type="file"
+        onChange={(event) => {
+          setFieldValue(fieldId, event.currentTarget.files[0])
+        }}
+        required={isRequired}
+      /> */}
+      {description && <p>{description}</p>}
+      <InputError name={id} />
+    </div>
+  )
+}
+
+File.propTypes = {
+  className: PropTypes.string,
+  description: PropTypes.string,
+  id: PropTypes.number.isRequired,
+  isRequired: PropTypes.bool,
+  label: PropTypes.string,
+  selectChoices: PropTypes.arrayOf(PropTypes.object),
+  visibility: PropTypes.string
+}

components/molecules/GravityForm/Fields/index.js

@@ -2,3 +2,4 @@ export {default} from './Fields'
 export {default as Checkbox} from './Checkbox'
 export {default as Select} from './Select'
 export {default as Text} from './Text'
+export {default as File} from './File'

components/molecules/GravityForm/GravityForm.js

@@ -31,6 +31,7 @@ export default function GravityForm({
       formDefaults={fieldDefaults}
       id={formId && `gform-${formId}`}
       validationSchema={formValidationSchema}
+      onSubmit={(values, actions) => console.log({values, actions})}
     >
       {title && <h2 className={styles.title}>{title}</h2>}
       {fieldData && <Fields fields={fieldData} />}