Describe the bug
I'm not sure if this is a bug or if it is designed in this way, but it's really weird.
When I am trying to set the component to only accept a specific file type and also show the AttachFileIcon (not sure if it is related to a specific icon and not tested), I get stuck cause of the wrong type and prop of the component.
To Reproduce
- Using 4.0.4 version
- Use the component, which should be able to only accept a specific type of file and show the icon
From the document, we can get a component like this to use the accept prop:
<MuiFileInput inputProps={{ accept: 'video/*' }} />
And for rendering the icon, I haven't found it in the document but the source code in this repo for the main page of the document:
<MuiFileInput
value={files}
multiple
onChange={handleChange}
placeholder="Insert a file"
clearIconButtonProps={{
children: <CloseIcon fontSize="small" />
}}
InputProps={{
startAdornment: <AttachFileIcon />
}}
/>
And I don't know if you noticed, but actually, there are two writing styles for the input-props
, and they both indeed can work on version 4.0.4.
When I am trying to use:
<MuiFileInput
value={value}
onChange={handleChange}
InputProps={{
startAdornment: <AttachFileIcon />,
accept: ".pdf",
}}
placeholder="Insert a file"
clearIconButtonProps={{
children: <CloseIcon fontSize="small" />,
}}
/>
I will get:
![image](https://private-user-images.githubusercontent.com/45194556/337194142-19e30e9a-cec4-43b4-b3df-be29b3af1766.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM2ODU0OTYsIm5iZiI6MTcyMzY4NTE5NiwicGF0aCI6Ii80NTE5NDU1Ni8zMzcxOTQxNDItMTllMzBlOWEtY2VjNC00M2I0LWIzZGYtYmUyOWIzYWYxNzY2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE1VDAxMjYzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWI2NjNiYjY5OTIyZjRlMzliMzRiYTUwYTJjMTAwNGMyNjk1MDhkN2U3YWZhZmZkMmJlNzgzNmVkNTkyYTY5NmMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ndh6ZKOfOBzxXC5QaQkZfzbs9onL9DwUKS2TmQIQrV4)
back, which means that accept doesn't exist and accept is really not working.
And if I use:
<MuiFileInput
value={value}
onChange={handleChange}
inputProps={{
startAdornment: <AttachFileIcon />,
accept: ".pdf",
}}
// inputProps={{ accept: ".pdf" }}
placeholder="Insert a file"
clearIconButtonProps={{
children: <CloseIcon fontSize="small" />,
}}
/>
I will get an error in console saying:
![image](https://private-user-images.githubusercontent.com/45194556/337194974-72d09109-f1eb-4232-a22b-a1dd0b0b9a72.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM2ODU0OTYsIm5iZiI6MTcyMzY4NTE5NiwicGF0aCI6Ii80NTE5NDU1Ni8zMzcxOTQ5NzQtNzJkMDkxMDktZjFlYi00MjMyLWEyMmItYTFkZDBiMGI5YTcyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE1VDAxMjYzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTIyMWNlYTJmYjVjMmFjOGRhZjBhNzdjZDc0NmExYWVmZjAyZGU1YjkyZmQ3MjE1OTM1MWQwZWFiM2I3MGE1ZTImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.chDVznfHWOCboashIkBT9iWp9K3z74mRNDUEpup20q4)
And by changing startAdornment
to startadornment
, it won't show the icon but can avoid browser error.
So, the finally working version for me is like:
<MuiFileInput
value={value}
onChange={handleChange}
InputProps={{
startAdornment: <AttachFileIcon />,
}}
inputProps={{ accept: ".pdf" }}
placeholder="Insert a file"
clearIconButtonProps={{
children: <CloseIcon fontSize="small" />,
}}
/>
Expected behavior
InputProps
and inputProps
should be merged into one prop.
Desktop (please complete the following information):
- OS: Windows 11
- Browser: Edge
Additional context
{
"name": "colossal-reader-app",
"version": "0.1.0",
"private": true,
"packageManager": "[email protected]",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@ant-design/nextjs-registry": "^1.0.0",
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.19",
"@mui/material": "^5.15.19",
"@mui/material-nextjs": "^5.15.11",
"@mui/system": "^5.15.15",
"@types/ua-parser-js": "^0.7.39",
"mui-file-input": "^4.0.4",
"next": "14.2.3",
"react": "^18",
"react-dom": "^18",
"sass": "^1.77.4",
"ua-parser-js": "^1.0.38"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.3",
"typescript": "^5"
}
}