Added docs for file input.

Author: Hyperkid123

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

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
+import TextField from '@data-driven-forms/pf4-component-mapper/dist/cjs/text-field';
+import useFieldApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-field-api';
+import submitFunction from './upload-handler';
+
+const FileUploadComponent = (props) => {
+  const { input, label } = useFieldApi(props);
+  return (
+    <div>
+      <label htmlFor={input.name}>{label}</label>
+      <input id={input.name} {...input} />
+    </div>
+  );
+};
+
+const componentMapper = {
+  [componentTypes.TEXT_FIELD]: TextField,
+  'file-upload': FileUploadComponent
+};
+
+const schema = {
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      label: 'Regular test field',
+      name: 'regular-field'
+    },
+    {
+      component: 'file-upload',
+      label: 'File upload',
+      name: 'file-upload-field-name',
+      type: 'file'
+    }
+  ]
+};
+
+const FormWithFileUpload = () => {
+  const [values, setValues] = useState();
+  return (
+    <div className="pf4">
+      {values && (
+        <div>
+          <h1>See that the files gets destroyed in JSON</h1>
+          <h2>See console for the stored value</h2>
+          <pre>{JSON.stringify(values, null, 2)}</pre>
+        </div>
+      )}
+      <FormRenderer
+        schema={schema}
+        componentMapper={componentMapper}
+        FormTemplate={FormTemplate}
+        onSubmit={async (values, formApi) => {
+          setValues(values);
+          console.log('form values', values);
+          console.log('formApi with fileInputs array', formApi);
+          const encoded = await submitFunction(values, formApi);
+          console.log('encoded image', encoded);
+        }}
+      />
+    </div>
+  );
+};
+
+export default FormWithFileUpload;

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

@@ -0,0 +1,25 @@
+import get from 'lodash/get';
+
+// https://stackoverflow.com/questions/36280818/how-to-convert-file-to-base64-in-javascript
+const toBase64 = (file) =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = (error) => reject(error);
+  });
+
+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();
+  formData.append(formApi.fileInputs[0], fileList[0]);
+  return {
+    base64Encoded,
+    formData
+  };
+};
+
+export default submitFunction;

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

@@ -0,0 +1,40 @@
+
+import Grid from '@material-ui/core/Grid'
+
+import ListOfContents from '../../src/helpers/list-of-contents';
+import CodeExample from '../../src/components/code-example';
+
+<Grid container item>
+<Grid item xs={12} md={10}>
+
+# 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.
+
+## 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)). 
+```jsx
+{
+  target: {
+    value: string, // usually it is the path to the file
+    files: FileList // an array of file references
+  }
+}
+```
+
+## 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.
+
+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.
+
+<CodeExample source="components/file-upload/upload-handler" />
+
+<CodeExample source="components/file-upload/file-input" mode="preview" additionalSources="components/file-upload/upload-handler.js" />
+
+</Grid>
+<Grid item xs={false} md={2}>
+  <ListOfContents file="renderer/file-input" />
+</Grid>
+</Grid>

packages/react-renderer-demo/src/app/src/components/navigation/documentation-pages.js

@@ -51,6 +51,10 @@ export const docs = [
     component: 'data-types',
     linkText: 'Data types'
   },
+  {
+    component: 'file-input',
+    linkText: 'File input'
+  },
   {
     component: 'cleared-value',
     linkText: 'Cleared field value'