material-ui-dropzone

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

 

 

 

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

``shell
npm install --save mui-file-dropzone
`

or

`shell
yarn 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:

!Dialog
!Dialog with Previews

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

!Drag Overlay

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

!Drag Error Overlay

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

$3

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

`jsx static
import React, { Component } from "react";
import { DropzoneArea } from "mui-file-dropzone";

class DropzoneAreaExample extends Component {
constructor(props) {
super(props);
this.state = {
files: [],
};
}
handleChange(files) {
this.setState({
files: files,
});
}
render() {
return ;
}
}

export default DropzoneAreaExample;
`

$3

This component provides the DropzoneArea inside of a MaterialUI Dialog.

`jsx static
import React, { Component } from "react";
import { DropzoneDialog } from "mui-file-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 (



);
}
}
``

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!