How to Implement React MUI File Upload in Your Applications

Looking to add a stylish file upload to your React app? Learn how Material-UI components can make uploads smooth, intuitive, and user-friendly. From drag-and-drop to progress tracking, we’ll guide you through building a polished solution.

In modern web applications, file upload is a common requirement.

Users expect smooth, responsive interfaces when sending files to a server. If you're building with React and want a polished interface, using React Material-UI components is a great approach.

But how do you integrate a file upload component that is both functional and visually appealing?

In this blog, we will cover how to implement React MUI file upload in your applications. You'll learn how to use Material UI components to create an intuitive file upload experience, handle files, and integrate with an API efficiently.

We will also discuss advanced techniques like drag-and-drop , file validation, progress tracking, and combining multiple components for a complete solution.

Getting Started with React and Material UI

Before building the upload functionality, ensure your React project is set up with Material UI. Material UI provides a wide range of components, from buttons to form inputs, that help maintain a consistent design. If you haven’t installed Material UI yet, you can do so using npm or yarn.

Copy
1npm install @mui/material @emotion/react @emotion/styled
2

Or with yarn:

Copy
1yarn add @mui/material @emotion/react @emotion/styled
2

Next, make sure you have the necessary icons if you plan to use them for upload buttons:

Copy
1npm install @mui/icons-material
2

These icons will make your upload buttons more visually appealing and intuitive for users. The combination of buttons, icons, and input fields ensures that your upload component feels modern and user-friendly.

How to Create a Basic File Upload Component?

Material UI makes creating a file upload component straightforward. Start by importing the required components.

Copy
1import React, { useState } from 'react';
2import { Button, Stack, LinearProgress } from '@mui/material';
3import IconButton from '@mui/material/IconButton';
4import PhotoCamera from '@mui/icons-material/PhotoCamera';
5
6export default function UploadButtons() {
7  const [selectedFiles, setSelectedFiles] = useState(null);
8
9  const handleFileChange = (event) => {
10    setSelectedFiles(event.target.files);
11  };
12
13  const handleUpload = () => {
14    // File upload logic
15    console.log(selectedFiles);
16  };
17
18  return (
19    <Stack direction="row" spacing={2} alignItems="center">
20      <label htmlFor="contained-button-file">
21        <input
22          accept="image/*"
23          id="contained-button-file"
24          multiple
25          type="file"
26          style={{ display: 'none' }}
27          onChange={handleFileChange}
28        />
29        <Button variant="contained" component="span" color="primary">
30          Upload Files
31        </Button>
32      </label>
33      <IconButton color="primary" aria-label="upload picture" component="span">
34        <PhotoCamera />
35      </IconButton>
36    </Stack>
37  );
38}
39

Explanation

• We use Button with variant contained and component span to create a clickable area that opens the file selection dialog.
• IconButton provides a visual icon for uploading pictures, which improves usability.
• The input type file is hidden and linked via label htmlFor to maintain accessibility.
• handleFileChange stores the selected files in the state for later processing.

This simple component lays the foundation for handling file uploads in your React project using Material UI.

Handling Multiple File Uploads

Many applications require uploading multiple files at once. Material UI allows for this using the multiple attribute in the input field. You can also display a progress bar for each file to give users feedback.

Copy
1const [progress, setProgress] = useState(0);
2
3const uploadFiles = () => {
4  const totalFiles = selectedFiles.length;
5  let uploaded = 0;
6
7  Array.from(selectedFiles).forEach((file) => {
8    // Simulate upload
9    setTimeout(() => {
10      uploaded += 1;
11      setProgress((uploaded / totalFiles) * 100);
12    }, 500);
13  });
14};
15

Using LinearProgress from Material UI, you can show real-time upload progress for multiple files. Users can immediately see how far along their uploads are, which improves the experience.

File Upload Process

This diagram illustrates the step-by-step process of file uploads: file selection, server upload, and displaying progress. It's a helpful visualization for planning your file upload feature.

How to Integrate with API?

To send files to the server, you can integrate with APIs using axios. Axios simplifies HTTP requests and supports progress tracking.

Copy
1npm install axios
2

Copy
1import axios from 'axios';
2
3const handleUpload = () => {
4  const formData = new FormData();
5  Array.from(selectedFiles).forEach((file) => {
6    formData.append('files', file);
7  });
8
9  axios.post('/api/upload', formData, {
10    headers: { 'Content-Type': 'multipart/form-data' },
11    onUploadProgress: (progressEvent) => {
12      const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
13      setProgress(percentCompleted);
14    }
15  })
16  .then((response) => {
17    console.log('Files uploaded successfully', response.data);
18  })
19  .catch((error) => {
20    console.error('Upload failed', error);
21  });
22};
23

This integration ensures that your uploaded files reach the server efficiently while providing real-time progress feedback.

Table: File Upload Status

Tracking each file's status is crucial for providing a smooth user experience. You can dynamically update this table as the upload progresses.

Drag-and-Drop Upload

Material UI doesn't include a native drag-and-drop upload, but combining it with react-dropzone provides a seamless experience.

Copy
1npm install react-dropzone
2

Copy
1import { useDropzone } from 'react-dropzone';
2
3const DropzoneArea = () => {
4  const { getRootProps, getInputProps } = useDropzone({
5    onDrop: (acceptedFiles) => setSelectedFiles(acceptedFiles)
6  });
7
8  return (
9    <div {...getRootProps()} style={{ border: '2px dashed gray', padding: 20 }}>
10      <input {...getInputProps()} />
11      <p>Drag 'n' drop some files here, or click to select files</p>
12    </div>
13  );
14};
15

This approach makes uploading intuitive. Users can drag multiple files at once, which is especially useful for applications handling many images or documents.

File Validation

Validating files before upload is essential. You can check type file and size to prevent invalid files from being uploaded.

Copy
1const handleFileChange = (event) => {
2  const validFiles = Array.from(event.target.files).filter(file => file.size <= 5 * 1024 * 1024);
3  setSelectedFiles(validFiles);
4};
5

This simple validation ensures that users don't upload unsupported or overly large files, reducing server errors.

Custom Material UI File Upload Form

By combining all the components, you can create a material ui upload form that is user-friendly and functional.

Copy
1import Stack from '@mui/material/Stack';
2import LinearProgress from '@mui/material/LinearProgress';
3
4const UploadForm = () => (
5  <Stack spacing={2} direction="column">
6    <UploadButtons />
7    {progress > 0 && <LinearProgress variant="determinate" value={progress} />}
8  </Stack>
9);
10

This approach gives users a complete interface with buttons, progress indicators, and optional drag-and-drop areas.

Enhancing Accessibility

Using aria-label attributes ensures your file upload component is accessible. For instance, aria-label="upload picture" helps screen readers interpret buttons correctly. Accessibility is often overlooked but significantly improves user experience.

Styling Components

Material UI allows extensive customization. You can adjust colors, spacing, and typography to match your application's design.

Copy
1<Button variant="contained" color="primary" style={{ borderRadius: 8, padding: '10px 20px' }}>
2  Upload Files
3</Button>
4

This small customization makes the button more visually appealing and consistent with your application's branding.

Build Complete Apps Without Writing a Single Line of Code

Want to go beyond file uploads? With Rocket.new, you can turn any idea into a fully functional React app—just describe it in plain language or import your Figma design. Build, customize, and deploy without touching a single line of code.

Start Building Now!

Further Reading & Community Resources

React – Implement a file upload component using MUI — Community-driven Q&A offering hands-on code examples for integrating file upload with Material UI and IconButton.- View complete post on Stack Overflow

Mastering React MUI File Upload

Creating a React MUI file upload feature is straightforward with Material UI components. By combining buttons, input fields, icons, progress bars, and optional drag-and-drop areas, you can deliver a seamless file upload experience. Integrating with APIs using axios ensures your files reach the server efficiently. With file validation and accessibility improvements, your upload feature can handle multiple scenarios while providing an intuitive interface.