Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement