File Upload Component Styled With Material UI

To style a native file picker as a Material UI button in React, render the button as a label and place a hidden <input type="file"> inside it. Clicking the label opens the browser’s file chooser. This pattern selects a file; it does not send the file to a server.

File Upload in Material UI in React

Use the following pattern in a React component:

<Button variant="contained" component="label">Choose file <input type="file" hidden /></Button>

The Button supplies Material UI styling, while component="label" makes its root element a label. The hidden native input remains the control that opens the file chooser. Because the input is nested inside the label, clicking the visible button activates it without a separate click handler. The hidden attribute removes the input’s own appearance; it does not remove its file-picker behavior.

Add this JSX to a component that already has the appropriate Button import. Material UI import paths depend on the major version installed in your project, so use the path documented for that version rather than assuming one universal setup. The snippet is a component pattern, not a complete application, and it has not been executed here because the supplied runtime evidence does not include a React or Material UI fixture.

After the user chooses a file, the browser makes the selected file available through the input’s files property. To respond to a selection, add an onChange handler and read the selected File from that property. The exact handling depends on the application: it might show the filename, validate the file, or prepare it for transfer. Selecting a file alone does not upload it. Sending it to a server requires additional application logic, such as building a request with FormData and submitting it to an upload endpoint.

You can change the button label, variant, or other supported Button props to match your interface. If you add an icon, use an icon package and import path compatible with the Material UI major version in your project. The example focuses on the label-and-hidden-input technique; it does not assume a particular project setup or provide upload-service code.