fix(striker-ui): trigger file input field with icon button

striker-ui/components/Files/Files.tsx

@@ -1,6 +1,7 @@
-import { Box, IconButton } from '@material-ui/core';
+import { Box, IconButton, Input, InputLabel } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import { makeStyles } from '@material-ui/styles';
+import { useRef } from 'react';
 
 import ICON_BUTTON_STYLE from '../../lib/consts/ICON_BUTTON_STYLE';
 import { Panel } from '../Panels';
@@ -9,10 +10,19 @@ import { HeaderText } from '../Text';
 
 const useStyles = makeStyles(() => ({
   addFileButton: ICON_BUTTON_STYLE,
+  addFileInput: {
+    display: 'none',
+  },
 }));
 
 const Files = (): JSX.Element => {
   const classes = useStyles();
+  const addFileInputRef = useRef<HTMLInputElement>();
+
+  // Let the icon button trigger the invisible input element.
+  const onAddFileButtonClick = () => {
+    addFileInputRef.current?.click();
+  };
 
   return (
     <Panel>
@@ -21,9 +31,22 @@ const Files = (): JSX.Element => {
           <HeaderText text="Files" />
         </Box>
         <Box>
-          <IconButton className={classes.addFileButton}>
+          <form encType="multipart/form-data">
+            <InputLabel htmlFor="add-file-input">
+              <Input
+                className={classes.addFileInput}
+                id="add-file-input"
+                ref={addFileInputRef}
+                type="file"
+              />
+              <IconButton
+                className={classes.addFileButton}
+                onClick={onAddFileButtonClick}
+              >
                 <AddIcon />
               </IconButton>
+            </InputLabel>
+          </form>
         </Box>
       </Box>
       <Spinner />