Material UI File Input draft

FileInput.jsx

import React, { useState, useCallback } from 'react';
import t from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Input from '@material-ui/core/Input';
import FormHelperText from '@material-ui/core/FormHelperText';
import AttachmentIcon from '@material-ui/icons/Attachment';
import { toMegaBytes } from '../../format';

const renderFileNames = ({ files }) =>
  files.map((file, index) => (
    <FormHelperText key={`${file.name}-${index}`}>
      {file.name} ({toMegaBytes(file.size)})
    </FormHelperText>
  ));

const useStyles = makeStyles(theme => ({
  input: {
    display: 'none',
  },
  buttonLabel: {
    maxWidth: 'auto',
  },
}));

function FileInput({
  label,
  id,
  multiple,
  ButtonProps,
  className,
  inputProps,
  renderHelper,
  renderEmptyHelper,
  ...rest
}) {
  const cl = useStyles();

  const [files, setFiles] = useState([]);

  const handleChange = useCallback(evt => {
    setFiles([...evt.target.files]);
  }, []);

  return (
    <React.Fragment>
      <Button {...ButtonProps} htmlFor={id} component="label" startIcon={<AttachmentIcon />} className={cl.buttonLabel}>
        {label}
      </Button>
      <Input
        {...rest}
        id={id}
        type="file"
        inputProps={{ ...inputProps, multiple }}
        className={clsx(className, cl.input)}
        onChange={handleChange}
      />
      {files.length === 0
        ? renderEmptyHelper({
            id,
            multiple,
            files,
          })
        : renderHelper({
            id,
            multiple,
            files,
          })}
    </React.Fragment>
  );
}

FileInput.propTypes = {
  label: t.string.isRequired,
  id: t.string.isRequired,
  multiple: t.bool,
  className: t.string,
  ButtonProps: t.object,
  inputProps: t.object,
  renderHelper: t.func,
  renderEmptyHelper: t.func,
};

FileInput.defaultProps = {
  multiple: false,
  className: '',
  ButtonProps: {},
  inputProps: {},
  renderHelper: renderFileNames,
  renderEmptyHelper: () => null,
};

export default FileInput;

IMPORTANT:
When using with FormControl, to prevent the button from getting its width increased when selecting files with large filenames, make sure to include:

alignItems: 'flex-start'

to the FormControl styles.