Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input of type file ignores the accept prop #12369

Closed
1 task
sfratini opened this issue Aug 1, 2018 · 10 comments
Closed
1 task

Input of type file ignores the accept prop #12369

sfratini opened this issue Aug 1, 2018 · 10 comments
Labels
component: text field This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@sfratini
Copy link

sfratini commented Aug 1, 2018

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
React 16.4.0
browser Chrome
etc.
@sfratini sfratini changed the title Input of type file ignores the accept property Input of type file ignores the accept prop Aug 1, 2018
@oliviertassinari oliviertassinari added docs Improvements or additions to the documentation good first issue Great for first contributions. Enable to learn the contribution process. component: text field This is the name of the generic UI component, not the React module! labels Aug 1, 2018
@oliviertassinari
Copy link
Member

@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
Copy link

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

@oliviertassinari
Copy link
Member

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

@sfratini
Copy link
Author

sfratini commented Aug 5, 2018

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
Copy link
Author

sfratini commented Aug 6, 2018

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
Copy link
Contributor

If no one is working on this can I?

@sfratini
Copy link
Author

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

@adeelibr
Copy link
Contributor

@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
Copy link
Contributor

#12737

@nb312
Copy link

nb312 commented Jan 30, 2022

@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 :).
So nice man.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: text field This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Development

No branches or pull requests

5 participants