The getPreviewIcon prop accepts a function that determines which icon to display for a specific file. This function receives fileObject (containing the native file object) and classes (the component's internal CSS classes).

This is useful for showing different icons for PDFs, Videos, Audio, or Word documents based on their MIME type.

import React, { useState } from 'react';
import { AttachFile, AudioTrack, Description, PictureAsPdf, Theaters } from '@mui/icons-material';

const handlePreviewIcon = (fileObject, classes) => {
  const {type} = fileObject.file
  const iconProps = {
    className : classes.image,
  }

  if (type.startsWith("video/")) return <Theaters {...iconProps} />
  if (type.startsWith("audio/")) return <AudioTrack {...iconProps} />

  switch (type) {
    case "application/msword":
    case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
      return <Description {...iconProps} />
    case "application/pdf":
      return <PictureAsPdf {...iconProps} />
    default:
      return <AttachFile {...iconProps} />
  }
}

const [fileObjects, setFileObjects] = useState([]);

<DropzoneAreaBase
  fileObjects={fileObjects}
  onAdd={newFileObjs => {
    console.log('onAdd', newFileObjs);
    setFileObjects([].concat(fileObjects, newFileObjs));
  }}
  onDelete={deleteFileObj => {
    console.log('onDelete', deleteFileObj);
  }}
  getPreviewIcon={handlePreviewIcon}
/>

DropzoneDialog is a component that provides a dialog interface for users to select and preview files. It can be controlled via an open state and provides an onSave callback containing the selected files.

Common Props

• acceptedFiles: An array of strings defining allowed file types (e.g., ['image/*']).
• maxFileSize: Maximum allowed file size in bytes.
• open: Boolean controlling the visibility of the dialog.
• onClose: Callback function triggered when the dialog is closed.
• onSave: Callback function triggered when the user submits the files. Receives the selected files as an argument.
• showPreviews: Boolean to enable or disable file previews.
• showFileNamesInPreview: Boolean to show file names within the preview area.
• cancelButtonText: Custom text for the cancel button.
• submitButtonText: Custom text for the submit button.

import Button from '@mui/material/Button';

const [open, setOpen] = React.useState(false);

<div
>
  <Button variant="contained" color="primary" onClick={() => setOpen(true)}>
    Add Image
  </Button>

  <DropzoneDialog
    acceptedFiles={['image/*']}
    cancelButtonText={"cancel"}
    submitButtonText={"submit"}
    maxFileSize={5000000}
    open={open}
    onClose={() => setOpen(false)}
    onSave={(files) => {
      console.log('Files:', files);
      setOpen(false);
    }}
    showPreviews={true}
    showFileNamesInPreview={true}
  />
</div>

The reset prop allows you to add a button to clear the dropzone.

• Functional Reset: Pass an object with an onClick handler: reset={{ onClick: () => ... }}.
• Custom Reset Button: Pass any valid React node (like a <button>) to the reset prop to completely customize the reset UI.

// Functional Reset
<DropzoneAreaBase
  onAdd={(fileObjs) => console.log('Added Files:', fileObjs)}
  onDelete={(fileObj) => console.log('Removed File:', fileObj)}
  onAlert={(message, variant) => console.log(`${variant}: ${message}`)}
  reset={{
    onClick: () => console.log('reset'),
  }}
/>

// Custom Reset Button
<DropzoneAreaBase
  onAdd={(fileObjs) => console.log('Added Files:', fileObjs)}
  onDelete={(fileObj) => console.log('Removed File:', fileObj)}
  onAlert={(message, variant) => console.log(`${variant}: ${message}`)}
  reset={<button style={{ margin: '20px 0' }} onClick={() => console.log('reset')}>reset</button>}
/>