mui2-file-dropzone

# material-ui-dropzone > Material-UI-dropzone is a [React](https://github.com/facebook/react) component using [Material-UI](https://github.com/mui-org/material-ui) and is based on the excellent [react-dropzone](https://github.com/react-dropzone/react-dropzone) library. [![License](https://img.shields.io/github/license/yuvaleros/material-ui-dropzone)](https://github.com/Yuvaleros/material-ui-dropzone/File/master/LICENSE) [![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg)](#contributors)  [![Rebuild Dist Workflow Status](https://img.shields.io/github/workflow/status/yuvaleros/material-ui-dropzone/Rebuild%20Dist?label=build)](https://github.com/Yuvaleros/material-ui-dropzone/actions?query=workflow%3A%22Rebuild+Dist%22) [![Update Docs Workflow Status](https://img.shields.io/github/workflow/status/yuvaleros/material-ui-dropzone/Update%20Docs?label=docs)](https://github.com/Yuvaleros/material-ui-dropzone/actions?query=workflow%3A%22Update+Docs%22) [![npm package](https://img.shields.io/npm/v/material-ui-dropzone)](https://www.npmjs.com/package/material-ui-dropzone) [![npm downloads](https://img.shields.io/npm/dm/material-ui-dropzone.svg)](https://www.npmjs.com/package/material-ui-dropzone) 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](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic.jpg) ![Dialog with Previews](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic5.JPG) When you drag a file onto the dropzone, you get a neat effect: ![Drag Overlay](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic2.JPG) And if you drag in a wrong type of file, you'll get yelled at: ![Drag Error Overlay](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic4.JPG) **N.B. This has some limitations (see [here](https://github.com/react-dropzone/react-dropzone/tree/master/examples/accept#browser-limitations) for more details).** ## Documentation and Examples See [https://yuvaleros.github.io/material-ui-dropzone](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 ```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 <DropzoneArea onChange={this.handleChange.bind(this)} />; } } export default DropzoneAreaExample; ``` ### DropzoneDialog 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 ( <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> ); } } ``` ## License MIT ## Contributors Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):    <table> <tr> <td align="center"><a href="https://github.com/Yuvaleros"><img src="https://avatars1.githubusercontent.com/u/3898166?v=4" width="80px;" alt=""/> Yuvaleros</a> <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=""/> Mattia Panzeri</a> <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=""/> Max Carroll</a> <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=""/> Matthew Corner</a> <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=""/> Barry Loong</a> <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=""/> JF Blouin</a> <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=""/> Anthony Raymond</a> <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=""/> isaacbuckman</a> <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> <td align="center"><a href="https://github.com/MatthijsMud"><img src="https://avatars3.githubusercontent.com/u/11519728?v=4" width="80px;" alt=""/> MatthijsMud</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/issues?q=author%3AMatthijsMud" title="Bug reports">🐛</a> <a href="https://github.com/Yuvaleros/material-ui-dropzone/commits?author=MatthijsMud" title="Code">💻</a></td> </tr> </table>    This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!