improves getDataByPath, converts Form to use FormData instead of sending JSON

src/client/components/forms/Form/index.js

@@ -89,21 +89,26 @@ const Form = (props) => {
 
   const getDataByPath = useCallback((path) => {
     const pathPrefixToRemove = path.substring(0, path.lastIndexOf('.') + 1);
+    const name = path.split('.').pop();
 
-    const rows = Object.keys(fields).reduce((matchedRows, key) => {
+    const data = Object.keys(fields).reduce((matchedData, key) => {
       if (key.indexOf(`${path}.`) === 0) {
         return {
-          ...matchedRows,
+          ...matchedData,
           [key.replace(pathPrefixToRemove, '')]: fields[key],
         };
       }
 
-      return matchedRows;
+      return matchedData;
     }, {});
 
-    const rowValues = reduceFieldsToValues(rows);
-    const unflattenedRows = unflatten(rowValues);
-    return unflattenedRows;
+    const values = reduceFieldsToValues(data);
+    const unflattenedData = unflatten(values);
+    return unflattenedData?.[name];
+  }, [fields]);
+
+  const getUnflattenedValues = useCallback(() => {
+    return reduceFieldsToValues(fields);
   }, [fields]);
 
   const validateForm = useCallback(() => {
@@ -112,6 +117,17 @@ const Form = (props) => {
     });
   }, [fields]);
 
+  const createFormData = useCallback(() => {
+    const formData = new FormData();
+    const data = reduceFieldsToValues(fields);
+
+    Object.entries(data).forEach(([key, value]) => {
+      formData.append(key, value);
+    });
+
+    return formData;
+  }, [fields]);
+
   const submit = useCallback((e) => {
     setSubmitted(true);
 
@@ -137,7 +153,6 @@ const Form = (props) => {
     // If submit handler comes through via props, run that
     if (onSubmit) {
       e.preventDefault();
-
       return onSubmit(fields);
     }
 
@@ -150,15 +165,12 @@ const Form = (props) => {
         behavior: 'smooth',
       });
 
-      const data = getData();
+      const formData = createFormData();
 
       setProcessing(true);
       // Make the API call from the action
       return requests[method.toLowerCase()](action, {
-        body: JSON.stringify(data),
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        body: formData,
       }).then((res) => {
         if (typeof handleAjaxResponse === 'function') return handleAjaxResponse(res);
 
@@ -250,11 +262,11 @@ const Form = (props) => {
     method,
     onSubmit,
     redirect,
-    getData,
     clearStatus,
     validateForm,
     onSuccess,
     replaceStatus,
+    createFormData,
   ]);
 
   useThrottledEffect(() => {
@@ -288,6 +300,7 @@ const Form = (props) => {
         getData,
         getSiblingData,
         validateForm,
+        getUnflattenedValues,
         modified,
         setModified,
       }}

src/client/components/forms/field-types/Flexible/index.js

@@ -72,7 +72,7 @@ const Flexible = (props) => {
   const addRow = (index, blockType) => {
     setAddRowIndex(current => current + 1);
 
-    const data = getDataByPath(path)?.[name];
+    const data = getDataByPath(path);
 
     dispatchRows({
       type: 'ADD', index, data, initialRowData: { blockType },
@@ -82,7 +82,7 @@ const Flexible = (props) => {
   };
 
   const removeRow = (index) => {
-    const data = getDataByPath(path)?.[name];
+    const data = getDataByPath(path);
 
     dispatchRows({
       type: 'REMOVE',
@@ -94,7 +94,7 @@ const Flexible = (props) => {
   };
 
   const moveRow = (moveFromIndex, moveToIndex) => {
-    const data = getDataByPath(path)?.[name];
+    const data = getDataByPath(path);
 
     dispatchRows({
       type: 'MOVE', index: moveFromIndex, moveToIndex, data,

src/client/components/forms/field-types/Repeater/index.js

@@ -60,7 +60,7 @@ const Repeater = (props) => {
   });
 
   const addRow = (rowIndex) => {
-    const data = getDataByPath(path)?.[name];
+    const data = getDataByPath(path);
 
     dispatchRows({
       type: 'ADD', index: rowIndex, data,
@@ -70,7 +70,7 @@ const Repeater = (props) => {
   };
 
   const removeRow = (rowIndex) => {
-    const data = getDataByPath(path)?.[name];
+    const data = getDataByPath(path);
 
     dispatchRows({
       type: 'REMOVE',
@@ -82,7 +82,7 @@ const Repeater = (props) => {
   };
 
   const moveRow = (moveFromIndex, moveToIndex) => {
-    const data = getDataByPath(path)?.[name];
+    const data = getDataByPath(path);
 
     dispatchRows({
       type: 'MOVE', index: moveFromIndex, moveToIndex, data,