Added tests for file input handlers.

Author: Hyperkid123

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

@@ -76,9 +76,6 @@ 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(() => {
@@ -180,6 +177,8 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, ...
     ...(arrayValidator ? { arrayValidator } : {}),
     input: {
       ...fieldProps.input,
+      value:
+        fieldProps.input.type === 'file' && typeof fieldProps.input.value === 'object' ? fieldProps.input.value.inputValue : fieldProps.input.value,
       onChange: (...args) => {
         enhancedOnChange(
           {

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

@@ -90,4 +90,15 @@ describe('#enhancedOnChange', () => {
       expect(enhancedOnChange({ onChange: (value) => value, initial, clearedValue }, value)).toEqual(value);
     });
   });
+
+  describe('#input type file', () => {
+    it('should return an object with inputValue and inputFiles keys', () => {
+      const value = { target: { value: 'fakepath/file.foo', files: [], type: 'file' } };
+      const expectedValue = {
+        inputValue: 'fakepath/file.foo',
+        inputFiles: []
+      };
+      expect(enhancedOnChange({ onChange: (value) => value }, value)).toEqual(expectedValue);
+    });
+  });
 });

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

@@ -9,6 +9,7 @@ import RendererContext from '../../files/renderer-context';
 
 describe('useFieldApi', () => {
   const Catcher = ({ children }) => children;
+  const registerInputFileSpy = jest.fn();
 
   const TestField = (props) => {
     const rest = useFieldApi(props);
@@ -29,7 +30,9 @@ describe('useFieldApi', () => {
             <form onSubmit={handleSubmit}>
               <RendererContext.Provider
                 value={{
-                  formOptions: {},
+                  formOptions: {
+                    registerInputFile: registerInputFileSpy
+                  },
                   validatorMapper: { required: () => (value) => (!value ? 'required' : undefined) }
                 }}
               >
@@ -52,6 +55,7 @@ describe('useFieldApi', () => {
       component: 'text-field',
       onSubmit: (values) => onSubmit(values)
     };
+    registerInputFileSpy.mockClear();
   });
 
   it('reloads type when component changes', () => {
@@ -158,4 +162,21 @@ describe('useFieldApi', () => {
 
     expect(wrapper.find(Catcher).props().meta.initial).toEqual('pepa');
   });
+
+  it('should assing correct value to type file input', () => {
+    const wrapper = mount(
+      <WrapperComponent
+        {...initialProps}
+        name="file-input"
+        type="file"
+        initialValue={{
+          inputValue: '',
+          inputFiles: []
+        }}
+      />
+    );
+
+    expect(wrapper.find('input').prop('value')).toEqual('');
+    expect(registerInputFileSpy).toHaveBeenCalledWith('file-input');
+  });
 });

packages/react-renderer-demo/src/app/examples/components/file-upload/upload-handler.js

@@ -11,7 +11,6 @@ const toBase64 = (file) =>
 
 const submitFunction = async (values, formApi) => {
   const myFile = get(values, formApi.fileInputs[0]); // there can be multiple inputs of this type
-  const fileFakePath = myFile.inputValue; // the fake path shown as the input value
   const fileList = myFile.inputFiles; // list of file renferences that should be uploaded to somewhere
   const base64Encoded = await toBase64(fileList[0]); // files list is always an array
   const formData = new FormData();

packages/react-renderer-demo/src/app/pages/renderer/file-input.md

@@ -9,25 +9,26 @@ import CodeExample from '../../src/components/code-example';
 
 # File input
 
-Files cannot be easilly uploaded in JSON payload. In order to upload files usigng the input type *file* you can follow these steps.
+Files cannot be easily uploaded in JSON payload. In order to upload files using the input type *file* you can follow these steps.
 
 ## File onChange payload
 
-In order to successfully store the file reference, you have either use an input of type file or use an object with the following shape in your on change function ([visit MDN docs for more info on file upload](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)). 
+In order to successfully store the file reference, you have either use an input of "file" type or use an object with the following shape in your on change function ([visit MDN docs for more info on file upload](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)). 
 ```jsx
 {
   target: {
     value: string, // usually it is the path to the file
-    files: FileList // an array of file references
+    files: FileList // an array of file references,
+    type: 'file' // type which allows the renderer to distinguish file payload
   }
 }
 ```
 
 ## Getting file from state.
 
-When submitting, you will have to construct the binary via FormData or encode the file to Base64, depending on your use case. Be aware that FormData cannot be sent in the JSON payload. Binaries are destroyed when serializing JSON. There will be a list of field names with the type file avaiable in the submit function arguments.
+When submitting, you will have to construct the binary via FormData or encode the file to Base64, depending on your use case. Be aware that FormData cannot be sent in the JSON payload. Binaries are destroyed when serializing JSON. There will be a list of field names with the type file available in the submit function arguments.
 
-The `formApi.fileInputs` is an array of field names with `type: file`. Be aware that if your filed name is in nested, you have to use the lodash like method of getting the value from state.
+The `formApi.fileInputs` is an array of field names with `type: file`. Be aware that if your field name is in nested, you have to use the lodash like method of getting the value from state.
 
 <CodeExample source="components/file-upload/upload-handler" />