javascript - Is there a way to limit Material UI TextFields of input type = file to accept only pdf?

I am trying to make my input type=file to limit the user to only upload pdf.

I looked it up and saw that using accept attribute can help. But it is not working using material UI text fields.

Any solution I can try?

I am trying to make my input type=file to limit the user to only upload pdf.

I looked it up and saw that using accept attribute can help. But it is not working using material UI text fields.

Any solution I can try?

Share Improve this question asked May 4, 2021 at 20:57 husseinnd 1352 silver badges7 bronze badges

you can use the accept attribute <input type="file" accept=".pdf"> – AngelSalazar Commented May 4, 2021 at 21:01

Add a comment |

3 Answers 3

Sorted by: Reset to default 17

Have you tried this:

<TextField type={"file"} inputProps={{accept:"application/pdf"}}/>

in MUIv6 inputProps is deprecated, so you have to use slotProps as they said on the docs, so this is the solution:

<TextField
   type="file"
   slotProps={{
     input: {
       inputProps: {
         accept: // kind of files you want
       },
     },
   }}
/>