From c2f38a3f001fea7319333ff9c70735dc47ba8915 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Tue, 16 Nov 2021 13:10:11 -0500
Subject: [PATCH] fix(striker-ui): trigger file input field with icon button

---
 striker-ui/components/Files/Files.tsx | 31 +++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/striker-ui/components/Files/Files.tsx b/striker-ui/components/Files/Files.tsx
index 697ef331..e37f9c25 100644
--- a/striker-ui/components/Files/Files.tsx
+++ b/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}>
-            <AddIcon />
-          </IconButton>
+          <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 />