use hidden input to collect files array

src/routes/Publish/Files/index.tsx

@@ -9,7 +9,9 @@ import styles from './index.module.scss'
 interface FilesProps {
     files: string[]
     placeholder: string
-    help: string
+    help?: string
+    name: string
+    onChange: any
     // resetForm: any
 }
 
@@ -40,11 +42,20 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
 
     public render() {
         const { isFormShown } = this.state
-        const { files, help, placeholder } = this.props
+        const { files, help, placeholder, name, onChange } = this.props
 
         return (
             <>
-                <Help>{help}</Help>
+                {help && <Help>{help}</Help>}
+
+                {/* Use hidden input to collect files */}
+                <input
+                    type="hidden"
+                    name={name}
+                    value={files}
+                    onChange={onChange}
+                />
+
                 <div className={styles.newItems}>
                     {files.length > 0 && (
                         <TransitionGroup

src/routes/Publish/index.tsx

@@ -67,8 +67,10 @@ class Publish extends Component<{}, PublishState> {
                         </Label>
                         <Files
                             placeholder={value.placeholder}
+                            name={value.name}
                             help={value.help}
                             files={this.state.files}
+                            onChange={onChange}
                         />
                     </Row>
                 )
@@ -95,7 +97,7 @@ class Publish extends Component<{}, PublishState> {
         event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
     ) => {
         this.setState({
-            [event.target.name]: event.target.value
+            [event.currentTarget.name]: event.currentTarget.value
         })
     }
 
@@ -103,7 +105,7 @@ class Publish extends Component<{}, PublishState> {
         event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
     ) => {
         this.setState({
-            [event.target.name]: [event.target.value]
+            [event.currentTarget.name]: [event.currentTarget.value]
         })
     }