Material-ui: Input of type file ignores the accept prop

[sfratini]

When using the Input class, if I want to enable just some mime types for upload, the property gets ignored and you can select any file.

• [ ] This is a v1.x issue.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I would like the file upload selector to only allow certain file types. In my case, MP3 files only.

Current Behavior

Any file (.) is free to be selected.

Steps to Reproduce

 <input
  accept="audio/mpeg, audio/mp3"
  type="file"
/>

<Input type="file" accept="audio/mpeg, audio/mp3"/>

First one works, second one does not.

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.2.0 | (Using a theme, cant upgrade yet)
| React | 16.4.0 |
| browser | Chrome |
| etc. | |

[oliviertassinari]

@sfratini Sweet. I have never thought of using the Input component for uploading a file. If you have a look at the API, you will find the inputProps property. Use that:

<Input type="file" inputProps={{ accept: 'audio/mpeg, audio/mp3' }} />

Do you want to add this example to the text field documentation? I think that it's a great demo :).

[arthurtyukayev]

@oliviertassinari This is labelled with "good first issue", what needs to be solved? Adding to documentation or passing the accept prop?

[oliviertassinari]

@arthurtyukayev Thanks for the interest. I was thinking of adding an example in the documentation. How does it sound?

[sfratini]

It is weird because I think I tried that and it didn´t work. I will test this code tomorrow and report my findings.

[sfratini]

Nevermind, it is working. It was a silly mistake on my part. I am using a theme on top of material-ui and it turns out that there is a custom input that uses the same prop name for the inputProps so I just had to repeat it. Here is what I mean:

<CustomInput
                      success={this.state.formState.url === true}
                      error={this.state.formState.url === false}
                      labelText={"Podcast"}
                        formControlProps={{
                          fullWidth: true,
                          className: classes.customFormControlClasses
                        }}
                        inputProps={{
                          type: "file",
                          inputProps: {accept: 'audio/mpeg, audio/mp3'},
                          onChange: this.onChange,
                          name: "url",
                          value: this.state.currentPodcast.url,
                          placeholder: "Podcast *"
                        }}
                      />

It is working normally now. Thanks!

[adeelibr]

If no one is working on this can I?

[sfratini]

That would be nice. I have never contributed to a public repo so I wouldn´t know where to start

[adeelibr]

@sfratini We have a very easy guide which you can follow. Check our Contributing To Material UI Guide You can give it a try, this can be an excellent opportunity to work on one of the most exciting projects in React. If you want to give it a shot let me know. That way I won't work on this one, and you can. If not then let me know that as well 😄

[adeelibr]

https://github.com/mui-org/material-ui/pull/12737