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
48
49
50
51
52
53
54
55
56
57
58
59

import React, { useRef } from 'react';
import { 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 inputRef = useRef<HTMLInputElement>(null);

  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));
    };
  };

  const handleClick = () => {
    if (inputRef?.current) inputRef.current.click();
  };

  const child = children && React.Children.only(children);

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

  return (
    <>
      <input
        type="file"
        ref={inputRef}
        multiple={false}
        accept=".jpg, .jpeg, .png, .gif"
        style={{ display: 'none' }}
        onChange={handleChange}
      />
      {
        React.isValidElement(child)
          ? React.cloneElement(child, { onClick: handleClick })
          : defaultButton
      }
    </>
  );
};

export default FileUpload;