src/components/FileUpload/FileUpload.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

import React, { useEffect } from 'react';
import { useFilePicker, utils } from 'react-sage';
import Button from '@material-ui/core/Button';
import CloudUpload from '@material-ui/icons/CloudUpload';

interface PropTypes {
  callback: (fileUrl: string, file: File) => void;
}


const FileUpload: React.FC<PropTypes> = ({ callback, children }) => {
  const { files, onClick, HiddenFileInput } = useFilePicker();

  useEffect(() => {
    if (files?.length) {
      const file = files[0];
      utils.loadFile(file).then(url => callback(url, file));
    }
  }, [files, callback]);

  const child = children && React.Children.toArray(children)[0];

  const defaultButton = (
    <Button
      onClick={onClick}
      variant="contained"
      color="primary"
      size="large"
      startIcon={<CloudUpload />}
    >
      Upload
    </Button>
  );

  return (
    <>
      <HiddenFileInput accept=".jpg, .jpeg, .png, .gif" multiple={false} />
      {
        React.isValidElement(child)
          ? React.cloneElement(child, { onClick })
          : defaultButton
      }
    </>
  );
};

export default FileUpload;