How to make input `type=file` to accept only images React

Question

<Input
  id="image"
  type="file"
  accept="image/*"
  onChange={(event) =>
    getBase64(event.target.files[0])
      .then((file) => this.setState({ image: file })
  )}
/> 

But it does accept other files too, what should I change to make it accept only images?

Dewberry

What do you mean by "it does accept other files too" and how is this related to React only? Do you want to validate the file type before uploading it to your server? – Adrien

React has an <input> element, not <Input> - you must be using some library that ignores the accept prop. Which library are you using? – Entomology

Answer 1

To set the accept attribute on an <Input /> you need to use inputPropslike this

<Input type="file" inputProps={{ accept: 'image/*' }} />

EDIT Looking at this some months later and reading @Aprillions comment I think it would be good to clarify this is Material-UI and not pure React

Washtub

Answer 2

The problem may be that you have passed or modified the props after changed the accept attribute. so, you have a solution or that. change the attribute order you passed. that means you can pass the accept attribute as the last attribute, like below.

<Input
 id="image"
 type="file"
 onChange={event =>
  getBase64(event.target.files[0]).then(file =>
   this.setState({ image: file })
 )
 accept="image/*"
}
/> 

Abut

Answer 3

File inputs have an accept attribute which you can use for this (docs).

Im

you mean this, accept="image/*" even after this attribute it does allow to select other files – Dewberry

@AmarThapa that will specify that only files with an image MIME type can be uploaded – Im

Answer 4

<input type="file" accept="image/*" />

this make input image only

Crosshatch

it accept all types of images – Crosshatch