MUI File Input (Accept Only Image)

June 30, 2023

I have a file input using MUI File Input react. I have a code that works fine. However, how can I restrict this file input that accepts only images?

These are my work so far:

const [locationImg, setLocationImg] = useState(null)

  const handleLocationImgChange = locationImg => {
    setLocationImg(locationImg)
  }

return(
 <MuiFileInput value={locationImg} onChange={handleLocationImgChange} multiple size='small' fullWidth />
)

>Solution :

As mentioned in their docs, MUI TextField‘s props can also be used.

<MuiFileInput
  inputProps={{ accept: "image/png, image/gif, image/jpeg" }}
  value={locationImg}
  onChange={handleLocationImgChange}
  multiple
  size="small"
  fullWidth
/>;