feat(all): enable input type file

Author: Hyperkid123

packages/react-form-renderer/demo/index.js

@@ -1,94 +1,17 @@
 /* eslint-disable camelcase */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import FormRenderer, { validatorTypes } from '../src';
+import FormRenderer from '../src';
 import componentMapper from './form-fields-mapper';
 import FormTemplate from './form-template';
-// import sandboxSchema from './sandbox';
-import DefaultSchemaError from '../src/files/schema-errors';
 
-const intl = (name) => `translated ${name}`;
-
-const actionMapper = {
-  loadData: (data) => (...args) =>
-    new Promise((resolve) => {
-      setTimeout(() => resolve({ custom: 'ererewr', ...data }), 1700);
-    }),
-  loadLabel: intl
-};
-
-const validatorMapper = {
-  asyncValidator: (url, attributes) => (value, allValues) =>
-    new Promise((resolve, reject) =>
-      setTimeout(() => {
-        if (value === 'error') {
-          reject('Async validation failed');
-        }
-
-        resolve('hola');
-      }, 1700)
-    )
-};
-
-// eslint-disable-next-line no-unused-vars
-const asyncValidatorSchema = {
+const fileSchema = {
   fields: [
-    {
-      component: 'composite-mapper-field',
-      name: 'composite-field',
-      label: 'Componsite field'
-    },
     {
       component: 'text-field',
-      name: 'async-validation-field',
-      label: 'Async validation field',
-      validate: [
-        { type: 'asyncValidator' },
-        { type: 'required' },
-        {
-          type: validatorTypes.PATTERN,
-          pattern: '^Foo$',
-          flags: 'i'
-        }
-      ]
-    }
-  ]
-};
-
-const conditionLogicDemo = {
-  title: 'Testing Conditions',
-  description: 'Write X in both',
-  fields: [
-    {
-      name: 'text_box_1',
-      label: 'Text Box 1',
-      title: 'Text Box',
-      component: 'text-field',
-      clearOnUnmount: true,
-      condition: {
-        sequence: [
-          { when: 'a', is: 'x', then: { visible: true, set: { password: 'defaultPassword' } }, else: { set: { password: 'no password' } } },
-          { when: 'b', is: 'x', then: { visible: true, set: { text_box_1: 'defaultText' } } }
-        ]
-      }
-    },
-    {
-      name: 'a',
-      label: 'a',
-      title: 'a',
-      component: 'text-field'
-    },
-    {
-      name: 'b',
-      label: 'b',
-      title: 'b',
-      component: 'text-field'
-    },
-    {
-      name: 'password',
-      label: 'password',
-      title: 'password',
-      component: 'text-field'
+      name: 'file-upload',
+      type: 'file',
+      label: 'file upload'
     }
   ]
 };
@@ -98,23 +21,10 @@ const App = () => {
   return (
     <div style={{ padding: 20 }}>
       <FormRenderer
-        validatorMapper={validatorMapper}
         componentMapper={componentMapper}
-        onSubmit={(values) => console.log(values)}
-        schema={conditionLogicDemo}
+        onSubmit={(values, ...args) => console.log(values, args)}
         FormTemplate={FormTemplate}
-        actionMapper={actionMapper}
-        schemaValidatorMapper={{
-          actions: {
-            loadLabel: (action, fieldName) => {
-              if (typeof action[1] !== 'string') {
-                throw new DefaultSchemaError(
-                  `Second argument of loadLabel action has to be a string: ID of the text from the translated database. Error found in ${fieldName}`
-                );
-              }
-            }
-          }
-        }}
+        schema={fileSchema}
       />
     </div>
   );

packages/react-form-renderer/src/files/form-renderer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import Form from './form';
 import arrayMutators from 'final-form-arrays';
 import PropTypes from 'prop-types';
@@ -25,6 +25,8 @@ const FormRenderer = ({
   schemaValidatorMapper,
   ...props
 }) => {
+  const [fileInputs, setFileInputs] = useState([]);
+  const focusDecorator = useRef(createFocusDecorator());
   let schemaError;
 
   const validatorMapperMerged = { ...defaultValidatorMapper, ...validatorMapper };
@@ -43,12 +45,16 @@ const FormRenderer = ({
     return <SchemaErrorComponent name={schemaError.name} message={schemaError.message} />;
   }
 
+  const registerInputFile = (name) => setFileInputs((prevFiles) => [...prevFiles, name]);
+
+  const unRegisterInputFile = (name) => setFileInputs((prevFiles) => [...prevFiles.splice(prevFiles.indexOf(name))]);
+
   return (
     <Form
       {...props}
-      onSubmit={onSubmit}
+      onSubmit={(values, formApi, callback) => onSubmit(values, { ...formApi, fileInputs }, callback)}
       mutators={{ ...arrayMutators }}
-      decorators={[createFocusDecorator()]}
+      decorators={[focusDecorator.current]}
       subscription={{ pristine: true, submitting: true, valid: true, ...subscription }}
       render={({ handleSubmit, pristine, valid, form: { reset, mutators, getState, submit, ...form } }) => (
         <RendererContext.Provider
@@ -57,6 +63,8 @@ const FormRenderer = ({
             validatorMapper: validatorMapperMerged,
             actionMapper,
             formOptions: {
+              registerInputFile,
+              unRegisterInputFile,
               pristine,
               onSubmit,
               onCancel: onCancel ? (...args) => onCancel(getState().values, ...args) : undefined,

packages/react-form-renderer/src/files/renderer-context.js

@@ -1,5 +1,7 @@
 import { createContext } from 'react';
 
-const RendererContext = createContext({});
+const RendererContext = createContext({
+  formOptions: {}
+});
 
 export default RendererContext;

packages/react-form-renderer/src/files/use-field-api.js

@@ -76,6 +76,9 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, ...
   };
 
   const fieldProps = useField(name, enhancedProps);
+  if (fieldProps.input.type === 'file' && typeof fieldProps.input.value === 'object') {
+    fieldProps.input = { ...fieldProps.input, value: fieldProps.input.value.inputValue };
+  }
 
   /** Reinitilize type */
   useEffect(() => {
@@ -132,6 +135,9 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, ...
   useEffect(
     () => {
       mounted.current = true;
+      if (fieldProps.input.type === 'file') {
+        formOptions.registerInputFile(fieldProps.input.name);
+      }
 
       return () => {
         mounted.current = false;
@@ -141,6 +147,10 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, ...
         if ((formOptions.clearOnUnmount || props.clearOnUnmount) && props.clearOnUnmount !== false) {
           fieldProps.input.onChange(fieldClearedValue);
         }
+
+        if (fieldProps.input.type === 'file') {
+          formOptions.unRegisterInputFile(fieldProps.input.name);
+        }
       };
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

packages/react-form-renderer/src/form-renderer/enhanced-on-change.js

@@ -11,6 +11,13 @@ const sanitizeValue = (event) => {
       return event;
     }
 
+    if (event.target.type === 'file') {
+      return {
+        inputValue: event.target.value,
+        inputFiles: event.target.files
+      };
+    }
+
     return event.target.value;
   }