Table of Contents

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 (
    <>
      <InputLabel htmlFor="upload">
        <Button variant="outlined" component="span">
          Upload File
        </Button>
      </InputLabel>
      <TextField
        type="file"
        sx={{ display: "none" }}
        id="upload"
        onChange={handleFileUpload}
      />
    </>
  );
};

export default UploadButton;

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 (

Upload File

</Button>

</InputLabel>

<TextField

type="file"

sx={{ display: "none" }}

id="upload"

onChange={handleFileUpload}

</>

);

};

export default UploadButton;

Must Read - Related Posts For You:

HOW TO MAKE CUSTOM FILE UPLOAD BUTTON USING MUI IN REACT

CUSTOMIZE FILE UPLOAD BUTTON USING MUI COMPONENT

Must Read - Related Posts For You:

Leave a Reply Cancel reply