Material UI - Basic File Input

BasicFileInput.tsx

import React from 'react'
import Button from '@material-ui/core/Button'

export interface BasicFileInputProps {
  label: string
  accept: string
  value: File | null
  onChange: (file: File | null) => void
}
const BasicFileInput: React.FC<BasicFileInputProps> = ({
  label,
  accept,
  value,
  onChange
}) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) {
      onChange(null)
      return
    }
    const file = e.target.files[0]

    if (!file) {
      onChange(null)
      return
    }

    onChange(file)
  }
  return (
    <span>
      <Button variant="outlined" component="label">
        {label}
        <input
          onChange={handleChange}
          type="file"
          accept={accept}
          style={{ display: 'none' }}
        />
      </Button>
      {value && <span style={{ marginLeft: 8 }}>{value.name}</span>}
    </span>
  )
}

export default BasicFileInput