CUSTOMIZE FILE UPLOAD BUTTON USING MUI COMPONENT
We have to use three MUI component here to customize the file upload button
TextField of type =’file’
InputLabel which will be attached to upload button Textfield using its “id” in htmlFor props.
Then we have to put the Button component inside the InputLabel and keep the display of Textfield as none so that the default upload button can be hidden and we can show the custom upload button.
There is one important thing to note here that we have to use the component prop in the Button component and need to keep its value as span to make this custom button working as upload button.
We will use the handleFileUpload function to get the uploaded file and put the logic in it to handle the uploaded file.
import TextField from “@mui/material/TextField”;
import InputLabel from “@mui/material/InputLabel”;
import Button from “@mui/material/Button”;
const UploadButton = () => {
const handleFileUpload = (event) => {
console.log(event.target.files[0]);
};
return (
<>
>
);
};
export default UploadButton;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
|
import TextField from “@mui/material/TextField”; import InputLabel from “@mui/material/InputLabel”; import Button from “@mui/material/Button”; const UploadButton = () => { const handleFileUpload = (event) => { console.log(event.target.files[0]); }; return ( <> <InputLabel htmlFor=“upload”> <Button variant=“outlined” component=“span”> Upload File </Button> nputLabel> <TextField type=“file” sx={{ display: “none” }} id=“upload” onChange={handleFileUpload} /> </> ); }; export default UploadButton; |
Comments are closed, but trackbacks and pingbacks are open.