# mui-file-dropzone > A Material-UI file-upload dropzone. Written in TypeScript. Latest version **4.0.2** (published 2022-09-17) · MIT license · 0 weekly downloads ## Install ```sh npm install mui-file-dropzone pnpm add mui-file-dropzone yarn add mui-file-dropzone bun add mui-file-dropzone ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.0.2 | | Published | 2022-09-17 | | First published | 2021-12-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 186.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 30 | | Author | Yuval | | Maintainers | deckstar | | Keywords | react, react-component, material design, material-ui, mui, dropzone, upload, react upload | ## Links - npm: https://www.npmjs.com/package/mui-file-dropzone - Repository: https://github.com/Deckstar/mui-file-dropzone - Homepage: https://github.com/Deckstar/mui-file-dropzone#readme - Issues: https://github.com/Deckstar/mui-file-dropzone/issues - npm.io page: https://npm.io/package/mui-file-dropzone ## Dependencies (3) - [clsx](https://npm.io/package/clsx.md) ^1.0.2 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.4.4 - [react-dropzone](https://npm.io/package/react-dropzone.md) ^10.2.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 4.0.2 (latest) — 2022-09-17 - 4.0.1 — 2021-12-16 - 4.0.0 — 2021-12-16 ## README # 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 ; } } 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 (
); } } ``` ## License MIT ## Contributors Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

Yuvaleros
🤔 💻 🎨 📖 💬 👀 🚧
Mattia Panzeri
🤔 💻 🎨 📖 💡 🚇 🐛 💬 👀 🚧
Max Carroll
🤔 💻 🎨 💡 👀

Matthew Corner
🐛 🤔 💻
Barry Loong
🤔 💻
JF Blouin
🤔 💻

Anthony Raymond
💻 💡
isaacbuckman
🐛 💻 💡
MatthijsMud
🐛 💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! --- _Source: https://npm.io/package/mui-file-dropzone · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._