Any idea how to make an input accept certain files extensions like pdf, online? so the can show in the box when picking instead of showing all files or custom files?
<input
accept='.Online'
className={classes.input}
id='contained-button-file' /*multiple*/
type='file'
onChange={fn} />
<label
htmlFor='contained-button-file'
className={classes.root}
style={{ marginTop: 'auto', marginBottom: 'auto' }}>
<Button
startIcon={<PublishIcon />}
variant='contained'
color='primary'
component='span'>
upload
</Button>
</label>
You can externally define accept props to input so that It will accept only the input type that you have specified as a comma-separated values:
The accept attribute value is a string that defines the file types the file input should accept. This string is a comma-separated list of unique file type specifiers. Because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of a given format. - MDN
You should read accept Docs
<input
id='contained-button-file' /*multiple*/
type='file'
accept=".pdf,.Online"
onChange={fn} />