question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Input of type file ignores the accept prop

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

34reactions
oliviertassinaricommented, Aug 1, 2018

@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 😃.

2reactions
adeelibrcommented, Aug 30, 2018

If no one is working on this can I?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found