How to Enable File Upload in React with Material-UI

Material-UI does not provide a built-in file input component, but you can easily create one using Material-UI's Button and TextField components. In this guide, you'll learn different methods to enable file upload in a React application using Material-UI.

Why Use Material-UI for File Upload?

Provides a clean and consistent UI
Allows easy integration with form validation libraries like Formik
Offers flexibility in styling and customization

Basic File Upload with Material-UI

To create a simple file upload button, wrap an <input type="file"> inside a Material-UI Button component.

import React, { useState } from 'react'
import { Button } from '@mui/material'

export default function FileUpload() {
  const [selectedFile, setSelectedFile] = useState(null)

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0])
  }

  return (
    <div>
      <input type="file" hidden id="upload-button" onChange={handleFileChange} />
      <label htmlFor="upload-button">
        <Button variant="contained" component="span">
          Upload File
        </Button>
      </label>
      {selectedFile && <p>Selected File: {selectedFile.name}</p>}
    </div>
  )
}

Explanation:

The <input type="file"> is hidden and triggered by clicking the Button.
The onChange event updates the selected file state.
The uploaded file name is displayed below the button.

Custom Styled File Upload with Material-UI

For a more polished look, you can use Material-UI's TextField along with a file input button:

import React, { useState } from 'react'
import { Button, TextField } from '@mui/material'

export default function CustomFileUpload() {
  const [fileName, setFileName] = useState('')

  const handleFileChange = (event) => {
    setFileName(event.target.files[0]?.name || '')
  }

  return (
    <div>
      <TextField
        value={fileName}
        label="Selected File"
        variant="outlined"
        fullWidth
        InputProps={{
          readOnly: true,
        }}
      />
      <input type="file" hidden id="file-upload" onChange={handleFileChange} />
      <label htmlFor="file-upload">
        <Button variant="contained" component="span">
          Choose File
        </Button>
      </label>
    </div>
  )
}

Using IconButton for File Upload

If you want to use an icon button for a more compact UI, you can use IconButton from Material-UI:

import React from 'react'
import { IconButton } from '@mui/material'
import PhotoCamera from '@mui/icons-material/PhotoCamera'

export default function IconButtonFileUpload() {
  return (
    <div>
      <input accept="image/*" hidden id="icon-button-file" type="file" />
      <label htmlFor="icon-button-file">
        <IconButton color="primary" component="span">
          <PhotoCamera />
        </IconButton>
      </label>
    </div>
  )
}

FAQ

1. How do I handle multiple file uploads?

Change type="file" to multiple and update state accordingly:

<input type="file" multiple onChange={handleFileChange} />

2. How do I validate the file type and size?

Use JavaScript to check file properties:

const handleFileChange = (event) => {
  const file = event.target.files[0]
  if (file && file.size > 5000000) {
    alert('File size should be less than 5MB')
    return
  }
  setSelectedFile(file)
}

3. How do I upload the file to a server?

Use FormData and an API call:

const handleUpload = async () => {
  const formData = new FormData()
  formData.append('file', selectedFile)

  await fetch('/upload', {
    method: 'POST',
    body: formData,
  })
}