HOW TO MAKE CUSTOM FILE UPLOAD BUTTON USING MUI IN REACT









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.












Technology

Another Tech Information

Comments are closed, but trackbacks and pingbacks are open.