refactor: rewrite FileUpload without react-sage

1 files changed, 21 insertions, 9 deletions

diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx
index 67d280d..1c05e7f 100644
--- a/src/components/FileUpload/FileUpload.tsx
+++ b/src/components/FileUpload/FileUpload.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
-import { useFilePicker, utils } from 'react-sage';
+import React, { useRef } from 'react';
+import { utils } from 'react-sage';
 import Button from '@material-ui/core/Button';
 import CloudUpload from '@material-ui/icons/CloudUpload';
 
@@ -9,20 +9,25 @@ interface PropTypes {
 
 
 const FileUpload: React.FC<PropTypes> = ({ callback, children }) => {
-  const { files, onClick, HiddenFileInput } = useFilePicker();
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target?.files;
     if (files?.length) {
       const file = files[0];
       utils.loadFile(file).then(url => callback(url, file));
-    }
-  }, [files, callback]);
+    };
+  };
+
+  const handleClick = () => {
+    if (inputRef?.current) inputRef.current.click();
+  };
 
   const child = children && React.Children.toArray(children)[0];
 
   const defaultButton = (
     <Button
-      onClick={onClick}
+      onClick={handleClick}
       variant="contained"
       color="primary"
       size="large"
@@ -34,10 +39,17 @@ const FileUpload: React.FC<PropTypes> = ({ callback, children }) => {
 
   return (
     <>
-      <HiddenFileInput accept=".jpg, .jpeg, .png, .gif" multiple={false} />
+      <input
+        type="file"
+        ref={inputRef}
+        multiple={false}
+        accept=".jpg, .jpeg, .png, .gif"
+        style={{ display: 'none' }}
+        onChange={handleChange}
+      />
       {
         React.isValidElement(child)
-          ? React.cloneElement(child, { onClick })
+          ? React.cloneElement(child, { onClick: handleClick })
           : defaultButton
       }
     </>