Material-UI-dropzone

https://github.com/yuvaleros/material-ui-dropzone
Admin
A React component for file uploads using Material-UI and react-dropzone, offering features like file...
Tokens:9,851
Snippets:31
Trust Score:6.7
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install material-ui-dropzone

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/README.md

Instructions for installing the material-ui-dropzone package using npm or yarn.

```shell
npm install --save material-ui-dropzone
```

```shell
yarn add material-ui-dropzone
```

--------------------------------

### Install Dependencies and Run Docs

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/CONTRIBUTING.md

This snippet shows how to clone the repository, install project dependencies using Yarn, and launch the interactive documentation development server.

```shell
git clone https://github.com/[YOUR-USERNAME]/material-ui-dropzone

yarn install

yarn docs:dev
```

--------------------------------

### Install Material-UI Dropzone

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/docs/installation.md

Instructions for installing the material-ui-dropzone package using either npm or yarn package managers.

```shell
npm install --save material-ui-dropzone
```

```shell
yarn add material-ui-dropzone
```

--------------------------------

### Basic Dropzone Usage

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneArea.md

A basic example of the DropzoneArea component with an onChange handler to log the selected files.

```jsx
<DropzoneArea
  onChange={(files) => console.log('Files:', files)}
/>
```

--------------------------------

### Loading Initial Files

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneArea.md

Shows how to load initial files into the DropzoneArea component using the initialFiles prop.

```jsx
const file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

<DropzoneArea
  initialFiles = {[file]}
  onChange={(files) => console.log('Files:', files)}
/>
```

--------------------------------

### Using Chips for Preview

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneArea.md

Illustrates how to use chips for file previews and customize their appearance using Material-UI's grid system and styling.

```jsx
import { createStyles, makeStyles } from '@mui/styles';

const useStyles = makeStyles(theme => createStyles({
  previewChip: {
    minWidth: 160,
    maxWidth: 210
  },
}));

const classes = useStyles();

<DropzoneArea
  showPreviews={true}
  showPreviewsInDropzone={false}
  useChipsForPreview
  previewGridProps={{container: { spacing: 1, direction: 'row' }}}
  previewChipProps={{classes: { root: classes.previewChip } }}
  previewText="Selected files"
/>
```

--------------------------------

### DropzoneArea Component Example

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/README.md

A basic example demonstrating the usage of the DropzoneArea component, which creates a file upload dropzone with previews and notifications without a dialog. It handles file changes via the onChange prop.

```jsx
import React, {Component} from 'react'
import {DropzoneArea} from 'material-ui-dropzone'

class DropzoneAreaExample extends Component{
  constructor(props){
    super(props);
    this.state = {
      files: []
    };
  }
  handleChange(files){
    this.setState({
      files: files
    });
  }
  render(){
    return (
      <DropzoneArea
        onChange={this.handleChange.bind(this)}
        />
    )
  }
}

export default DropzoneAreaExample;
```

--------------------------------

### Import DropzoneAreaBase

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneAreaBase.md

Imports the necessary DropzoneAreaBase component from the material-ui-dropzone library.

```jsx
import { DropzoneAreaBase } from 'material-ui-dropzone';
```

--------------------------------

### Custom Preview Icons for File Types

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneAreaBase.md

Provides a comprehensive example of customizing preview icons for various file types (PDF, video, audio, Word documents) using the `getPreviewIcon` prop. It includes state management for file objects and event handlers.

```jsx
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}
/>
```

--------------------------------

### Basic Usage of DropzoneAreaBase

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneAreaBase.md

Demonstrates the fundamental usage of the DropzoneAreaBase component with event handlers for adding and deleting files, and for alerts.

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

--------------------------------

### DropzoneDialog Component Example

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/README.md

An example showcasing the DropzoneDialog component, which integrates the DropzoneArea within a Material-UI Dialog. It includes functionality to open/close the dialog, handle file saving, and configure accepted file types and maximum file size.

```jsx
import React, { Component } from 'react'
import {DropzoneDialog} from 'material-ui-dropzone'
import Button from '@mui/material/Button';

export default class DropzoneDialogExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            files: []
        };
    }

    handleClose() {
        this.setState({
            open: false
        });
    }

    handleSave(files) {
        //Saving files to state for further use and closing Modal.
        this.setState({
            files: files,
            open: false
        });
    }

    handleOpen() {
        this.setState({
            open: true,
        });
    }

    render() {
        return (
            <div>
                <Button onClick={this.handleOpen.bind(this)}>
                  Add Image
                </Button>
                <DropzoneDialog
                    open={this.state.open}
                    onSave={this.handleSave.bind(this)}
                    acceptedFiles={['image/jpeg', 'image/png', 'image/bmp']}
                    showPreviews={true}
                    maxFileSize={5000000}
                    onClose={this.handleClose.bind(this)}
                />
            </div>
        );
    }
}
```

--------------------------------

### Import DropzoneArea

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneArea.md

Imports the DropzoneArea component from the material-ui-dropzone library.

```jsx
import { DropzoneArea } from 'material-ui-dropzone';
```

--------------------------------

### Custom Preview Icons

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneArea.md

Demonstrates how to customize the preview icons for different file types (PDF, video, audio, Word documents) using the getPreviewIcon prop.

```jsx
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} />
  }
}

<DropzoneArea
  getPreviewIcon={handlePreviewIcon}
/>
```

--------------------------------

### Accept Only Images

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneArea.md

Configures the DropzoneArea to accept only image files and customizes the dropzone text.

```jsx
<DropzoneArea
  acceptedFiles={['image/*']}
  dropzoneText={"Drag and drop an image here or click"}
  onChange={(files) => console.log('Files:', files)}
/>
```

--------------------------------

### Basic DropzoneDialog Usage

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneDialog.md

This example demonstrates the basic usage of the DropzoneDialog component. It includes setting the open state, configuring accepted file types, button texts, max file size, and handling file saves. The component is triggered by a button click.

```jsx
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>
```

--------------------------------

### Accept Only Images

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneAreaBase.md

Configures the DropzoneAreaBase to accept only image files and customizes the dropzone text. Includes event handlers for file changes and alerts.

```jsx
<DropzoneAreaBase
  acceptedFiles={['image/*']}
  dropzoneText={"Drag and drop an image here or click"}
  onChange={(files) => console.log('Files:', files)}
  onAlert={(message, variant) => console.log(`${variant}: ${message}`)}
/>
```

--------------------------------

### Custom Reset Button

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneAreaBase.md

Demonstrates how to use a custom DOM node as a reset button for the DropzoneAreaBase, providing more flexibility in UI design. Includes file add, delete, and alert handlers.

```jsx
<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>}
/>
```

--------------------------------

### Reset Button Functionality

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneAreaBase.md

Implements a basic reset button functionality for the DropzoneAreaBase, allowing users to clear the selected files. Includes handlers for file addition, deletion, and alerts.

```jsx
<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 Dropzone Icon

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneAreaBase.md

Shows how to replace the default dropzone icon with a custom icon, in this case, the AttachFile icon from Material-UI. Also includes file change and alert handlers.

```jsx
import { AttachFile } from '@mui/icons-material';

<DropzoneAreaBase
  Icon={AttachFile}
  dropzoneText={"Drag and drop an image here or click"}
  onChange={(files) => console.log('Files:', files)}
  onAlert={(message, variant) => console.log(`${variant}: ${message}`)}
/>
```

--------------------------------

### Basic Usage of DropzoneDialogBase

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneDialogBase.md

Demonstrates the basic usage of the DropzoneDialogBase component, including state management for dialog visibility and file objects, custom dialog title, accepted file types, file size limits, and event handlers for adding, deleting, saving, and closing the dialog.

```jsx
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';

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

const dialogTitle = () => (
  <>
    <span>Upload file</span>
    <IconButton
      style={{right: '12px', top: '8px', position: 'absolute'}}
      onClick={() => setOpen(false)}>
      <CloseIcon />
    </IconButton>
  </>
);

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

  <DropzoneDialogBase
    dialogTitle={dialogTitle()}
    acceptedFiles={['image/*']}
    fileObjects={fileObjects}
    cancelButtonText={"cancel"}
    submitButtonText={"submit"}
    maxFileSize={5000000}
    open={open}
    onAdd={newFileObjs => {
      console.log('onAdd', newFileObjs);
      setFileObjects([].concat(fileObjects, newFileObjs));
    }}
    onDelete={deleteFileObj => {
      console.log('onDelete', deleteFileObj);
    }}
    onClose={() => setOpen(false)}
    onSave={() => {
      console.log('onSave', fileObjects);
      setOpen(false);
    }}
    showPreviews={true}
    showFileNamesInPreview={true}
  />
</div>
```

--------------------------------

### Build Project

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/CONTRIBUTING.md

This command is used to build the Material-UI Dropzone project, ensuring all necessary build processes are completed before submitting changes.

```shell
yarn build
```

--------------------------------

### Import DropzoneDialogBase

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneDialogBase.md

Imports the necessary DropzoneDialogBase component from the material-ui-dropzone library.

```jsx
import { DropzoneDialogBase } from 'material-ui-dropzone';
```

--------------------------------

### Preview List Theming

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/docs/theming.md

Defines the theme namespace and global CSS classes for the PreviewList component, used for displaying file previews.

```APIDOC
PreviewList:
  Theme Namespace: MuiDropzonePreviewList
  Classes:
    root: .MuiDropzonePreviewList-root - Applied to PreviewList container.
    imageContainer: .MuiDropzonePreviewList-imageContainer - Applied to the single preview image container.
    image: .MuiDropzonePreviewList-image - Applied to the single preview image.
    removeButton: .MuiDropzonePreviewList-removeButton - Applied to the preview 'remove' FAB.
```

--------------------------------

### Basic File Upload Dropzone

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/docs/intro.md

This snippet demonstrates the basic usage of the file upload dropzone component. It allows users to drag and drop files or click to select files. The component provides visual feedback for allowed and disallowed files.

```jsx
import React from 'react';
import { DropzoneArea } from 'material-ui-dropzone';

function MyDropzone() {
  return (
    <DropzoneArea
      acceptedFiles={['image/jpeg', 'image/png', 'image/bmp']}
      showPreviews={true}
      maxFileSize={5000000} // 5MB
      filesLimit={3}
      onChange={(files) => console.log('Files:', files)}
    />
  );
}

export default MyDropzone;
```

--------------------------------

### Import DropzoneDialog

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/src/components/DropzoneDialog.md

This snippet shows how to import the DropzoneDialog component from the material-ui-dropzone library.

```jsx
import { DropzoneDialog } from 'material-ui-dropzone';
```

--------------------------------

### Sample Theme Override for Alert Snackbar

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/docs/theming.md

Demonstrates how to override the default styles of the MuiDropzoneSnackbar component, specifically the error and success alert colors, using createMuiTheme and MuiThemeProvider.

```jsx
import { MuiThemeProvider, createMuiTheme } from "@mui/styles";

import DropzoneArea from '../src/components/DropzoneArea';

const theme = createMuiTheme({
  overrides: {
    MuiDropzoneSnackbar: {
      errorAlert: {
        backgroundColor: "#AFA",
        color: "#000"
      },
      successAlert: {
        backgroundColor: "#FAA",
        color: "#000"
      },
    }
  }
});

<MuiThemeProvider theme={theme}>
  <DropzoneArea maxFileSize={1} />
</MuiThemeProvider>
```

--------------------------------

### Contributor Information

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/README.md

This section displays contributor information, including their GitHub username, profile picture, and a breakdown of their contributions using emojis. The data is presented in an HTML table format.

```html
<table>
  <tr>
    <td align="center"><a href="https://github.com/Yuvaleros"><img src="https://avatars1.githubusercontent.com/u/3898166?v=4" width="80px;" alt=""/><br /><sub><b>Yuvaleros</b></sub></a><br /><a href="#ideas-Yuvaleros" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/commits?author=Yuvaleros" title="Code">💻</a> <a href="#design-Yuvaleros" title="Design">🎨</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/commits?author=Yuvaleros" title="Documentation">📖</a> <a href="#question-Yuvaleros" title="Answering Questions">💬</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/pulls?q=is%3Apr+reviewed-by%3AYuvaleros" title="Reviewed Pull Requests">👀</a> <a href="#maintenance-Yuvaleros" title="Maintenance">🚧</a></td>
    <td align="center"><a href="https://github.com/panz3r"><img src="https://avatars3.githubusercontent.com/u/1754457?v=4" width="80px;" alt=""/><br /><sub><b>Mattia Panzeri</b></sub></a><br /><a href="#ideas-panz3r" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/commits?author=panz3r" title="Code">💻</a> <a href="#design-panz3r" title="Design">🎨</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/commits?author=panz3r" title="Documentation">📖</a> <a href="#example-panz3r" title="Examples">💡</a> <a href="#infra-panz3r" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/issues?q=author%3Apanz3r" title="Bug reports">🐛</a> <a href="#question-panz3r" title="Answering Questions">💬</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/pulls?q=is%3Apr+reviewed-by%3Apanz3r" title="Reviewed Pull Requests">👀</a> <a href="#maintenance-panz3r" title="Maintenance">🚧</a></td>
    <td align="center"><a href="https://github.com/max-carroll"><img src="https://avatars2.githubusercontent.com/u/13512675?v=4" width="80px;" alt=""/><br /><sub><b>Max Carroll</b></sub></a><br /><a href="#ideas-max-carroll" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/commits?author=max-carroll" title="Code">💻</a> <a href="#design-max-carroll" title="Design">🎨</a> <a href="#example-max-carroll" title="Examples">💡</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/pulls?q=is%3Apr+reviewed-by%3Amax-carroll" title="Reviewed Pull Requests">👀</a></td>
  </tr>
  <tr>
    <td align="center"><a href="https://github.com/mattcorner"><img src="https://avatars1.githubusercontent.com/u/27866636?v=4" width="80px;" alt=""/><br /><sub><b>Matthew Corner</b></sub></a><br /><a href="https://github.com/Yuvaleros/material-ui-dropzone/issues?q=author%3Amattcorner" title="Bug reports">🐛</a> <a href="#ideas-mattcorner" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/commits?author=mattcorner" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/loongyh"><img src="https://avatars3.githubusercontent.com/u/20846761?v=4" width="80px;" alt=""/><br /><sub><b>Barry Loong</b></sub></a><br /><a href="#ideas-loongyh" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/commits?author=loongyh" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/blouin"><img src="https://avatars1.githubusercontent.com/u/20212446?v=4" width="80px;" alt=""/><br /><sub><b>JF Blouin</b></sub></a><br /><a href="#ideas-blouin" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/commits?author=blouin" title="Code">💻</a></td>
  </tr>
  <tr>
    <td align="center"><a href="http://stackoverflow.com/users/2275818/anthony-raymond"><img src="https://avatars1.githubusercontent.com/u/7503585?v=4" width="80px;" alt=""/><br /><sub><b>Anthony Raymond</b></sub></a><br /><a href="https://github.com/Yuvaleros/material-ui-dropzone/commits?author=anthonyraymond" title="Code">💻</a> <a href="#example-anthonyraymond" title="Examples">💡</a></td>
    <td align="center"><a href="https://github.com/isaacbuckman"><img src="https://avatars1.githubusercontent.com/u/34870239?v=4" width="80px;" alt=""/><br /><sub><b>isaacbuckman</b></sub></a><br /><a href="https://github.com/Yuvaleros/material-ui-dropzone/issues?q=author%3Aisaacbuckman" title="Bug reports">🐛</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/commits?author=isaacbuckman" title="Code">💻</a> <a href="#example-isaacbuckman" title="Examples">💡</a></td>
  </tr>
</table>
```

--------------------------------

### Alert Snackbar Theming

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/docs/theming.md

Defines the theme namespace and global CSS classes for the Alert Snackbar component, used for displaying notifications.

```APIDOC
Alert Snackbar:
  Theme Namespace: MuiDropzoneSnackbar
  Classes:
    infoAlert: .MuiDropzoneSnackbar-infoAlert - Applied to the alert snackbar for 'info' messages.
    successAlert: .MuiDropzoneSnackbar-successAlert - Applied to the alert snackbar for 'success' messages.
    warningAlert: .MuiDropzoneSnackbar-warningAlert - Applied to the alert snackbar for 'warning' messages.
    errorAlert: .MuiDropzoneSnackbar-errorAlert - Applied to the alert snackbar for 'error' messages.
    message: .MuiDropzoneSnackbar-message - Applied to the alert snackbar message.
    icon: .MuiDropzoneSnackbar-icon - Applied to the alert snackbar icon.
    closeButton: .MuiDropzoneSnackbar-closeButton - Applied to the alert snackbar 'close' button.
```

--------------------------------

### Material-UI Dropzone Support Matrix

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/docs/support.md

This table shows the compatibility of material-ui-dropzone versions with specific React and Material-UI versions. Version 3.x requires React 16.8+ and Material-UI 4.x, while version 2.x supports React 15.x or 16.x and Material-UI 3.x or 4.x.

```markdown
| version | React            | Material-UI    |
| ------- | ---------------- | -------------- |
| `3.x`   | `16.8+`          | `4.x`          |
| `2.x`   | `15.x` or `16.x` | `3.x` or `4.x` |
```

--------------------------------

### File Upload Dropzone in Dialog

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/docs/intro.md

This snippet shows how to integrate the file upload dropzone within a Material-UI Dialog. This is useful for scenarios where you want to present the file upload interface in a modal context. It includes props for controlling dialog visibility and handling file uploads.

```jsx
import React, { useState } from 'react';
import { Button, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
import { DropzoneDialog } from 'material-ui-dropzone';

function MyDropzoneDialog() {
  const [open, setOpen] = useState(false);
  const [files, setFiles] = useState([]);

  const handleSave = (uploadedFiles) => {
    console.log('Files:', uploadedFiles);
    setFiles(uploadedFiles);
    setOpen(false);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button onClick={() => setOpen(true)}>Open Dropzone Dialog</Button>
      <DropzoneDialog
        open={open}
        onSave={handleSave}
        acceptedFiles={['image/jpeg', 'image/png']}
        showPreviews={true}
        maxFileSize={5000000}
        filesLimit={3}
        onClose={handleClose}
        dialogTitle="Upload Files"
        cancelButtonText="Cancel"
        submitButtonText="Upload"
      />
      <div>
        <h4>Uploaded Files:</h4>
        <ul>
          {files.map((file, index) => (
            <li key={index}>{file.name}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default MyDropzoneDialog;
```

--------------------------------

### DropzoneArea Theming

Source: https://github.com/yuvaleros/material-ui-dropzone/blob/master/docs/theming.md

Defines the theme namespace and global CSS classes for the DropzoneArea component. These classes can be targeted for style overrides.

```APIDOC
DropzoneArea:
  Theme Namespace: MuiDropzoneArea
  Classes:
    root: .MuiDropzoneArea-root - Applied to DropzoneArea container.
    active: .MuiDropzoneArea-active - Applied when the Dropzone is 'active'.
    invalid: .MuiDropzoneArea-invalid - Applied when receiving invalid files.
    textContainer: .MuiDropzoneArea-textContainer - Applied to the text container div.
    text: .MuiDropzoneArea-text - Applied to the hint text.
    icon: .MuiDropzoneArea-icon - Applied to the hint icon.
```
Tokens:
Raw