material-ui-dropzone

Material-UI-dropzone is a React component using Material-UI and is based on the excellent react-dropzone library.

⚠️ This is a fork from material-ui-dropzone containing a more updated version of react-dropzone, which allows for custom validations of files.

This components provide either a file-upload dropzone or a file-upload dropzone inside of a dialog.

The file-upload dropzone features some snazzy "File Allowed/Not Allowed" effects, previews and alerts.

Installation

1npm install --save mui-file-dropzone

or

1yarn add mui-file-dropzone

Support

mui-file-dropzone complies to the following support matrix.

version	React	Material-UI
4.x	17.0+	5.x
3.x	16.8+	4.x
2.x	15.x or 16.x	3.x or 4.x

Screenshots

This is the Dialog component:

When you drag a file onto the dropzone, you get a neat effect:

And if you drag in a wrong type of file, you'll get yelled at:

N.B. This has some limitations (see here for more details).

Documentation and Examples

See https://yuvaleros.github.io/material-ui-dropzone for Documentation and Examples.

Components

DropzoneArea

This components creates the dropzone, previews and snackbar notifications without a dialog

1import React, { Component } from "react";
2import { DropzoneArea } from "mui-file-dropzone";
3
4class DropzoneAreaExample extends Component {
5  constructor(props) {
6    super(props);
7    this.state = {
8      files: [],
9    };
10  }
11  handleChange(files) {
12    this.setState({
13      files: files,
14    });
15  }
16  render() {
17    return (
18      <DropzoneArea
19        onChange={this.handleChange.bind(this)}
20        dropzoneProps={{ validator: () => <your custom validation> }}            
21      />
22    );
23  }
24}
25
26export default DropzoneAreaExample;

DropzoneDialog

This component provides the DropzoneArea inside of a MaterialUI Dialog.

1import React, { Component } from "react";
2import { DropzoneDialog } from "mui-file-dropzone";
3import Button from "@mui/material/Button";
4
5export default class DropzoneDialogExample extends Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9      open: false,
10      files: [],
11    };
12  }
13
14  handleClose() {
15    this.setState({
16      open: false,
17    });
18  }
19
20  handleSave(files) {
21    //Saving files to state for further use and closing Modal.
22    this.setState({
23      files: files,
24      open: false,
25    });
26  }
27
28  handleOpen() {
29    this.setState({
30      open: true,
31    });
32  }
33
34  render() {
35    return (
36      <div>
37        <Button onClick={this.handleOpen.bind(this)}>Add Image</Button>
38        <DropzoneDialog
39          open={this.state.open}
40          onSave={this.handleSave.bind(this)}
41          acceptedFiles={["image/jpeg", "image/png", "image/bmp"]}
42          showPreviews={true}
43          maxFileSize={5000000}
44          onClose={this.handleClose.bind(this)}
45        />
46      </div>
47    );
48  }
49}

License

MIT

Contributors

Thanks goes to these wonderful people (emoji key):

Yuvaleros 🤔 💻 🎨 📖 💬 👀 🚧	Mattia Panzeri 🤔 💻 🎨 📖 💡 🚇 🐛 💬 👀 🚧	Max Carroll 🤔 💻 🎨 💡 👀
Matthew Corner 🐛 🤔 💻	Barry Loong 🤔 💻	JF Blouin 🤔 💻
Anthony Raymond 💻 💡	isaacbuckman 🐛 💻 💡	MatthijsMud 🐛 💻

This project follows the all-contributors specification. Contributions of any kind welcome!