Input of type file ignores the accept prop
See original GitHub issueWhen 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. |
Issue Analytics
- State:
- Created 5 years ago
- Reactions:3
- Comments:10 (5 by maintainers)
Top Results From Across the Web
React: input type "file" ignores `accept` property when you ...
property when you upload files using drag and drop - Stack Overflow. Stack Overflow for Teams – Start collaborating and sharing organizational ...
Read more >Input of type file ignores the accept prop · Issue #12369
When using the Input class, if I want to enable just some mime types for upload, the property gets ignored and you can...
Read more >React: input type "file" ignores `accept` property when you ...
Coding example for the question React: input type "file" ignores `accept` property when you upload files using drag and drop-Reactjs.
Read more >HTML attribute: accept - HTML: HyperText Markup Language
The accept property is an attribute of the file <input> type. It was supported on the <form> element, but was removed in favor...
Read more >Upload
Extends File with additional props. Property, Description, Type, Default, Version. crossOrigin, CORS settings attributes, 'anonymous' | ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@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:Do you want to add this example to the text field documentation? I think that it’s a great demo 😃.
If no one is working on this can I?