npm package: @pandemicode/material-ui-dropzone
Description: A Material-UI File Upload Dropzone
Author: Yuval
Latest version: 3.5.5

# material-ui-dropzone

[![License](https://img.shields.io/github/license/jpinho/material-ui-dropzone)](https://github.com/jpinho/material-ui-dropzone/blob/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/@pandemicode/material-ui-dropzone)](https://www.npmjs.com/package/@pandemicode/material-ui-dropzone) [![npm downloads](https://img.shields.io/npm/dm/@pandemicode/material-ui-dropzone.svg)](https://www.npmjs.com/package/@pandemicode/material-ui-dropzone)


**@pandemicode/material-ui-dropzone** a fork of **[Material-UI-Dropzone](https://github.com/Yuvaleros/material-ui-dropzone)** is a set of [React](https://github.com/facebook/react) components 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.

These components provide: 

- File Upload Dropzone
- File Upload Dropzone inside of a Dialog

Additionally, the File Upload Dropzone features some snazzy "File Allowed/Not Allowed" effects, previews and alerts.

Before proceeding with using this module, refer to the <a href="#disclaimer">disclaimer section</a> on the end of this README.


## Installation

```shell
npm install --save @pandemicode/material-ui-dropzone
```

or

```shell
yarn add @pandemicode/material-ui-dropzone
```

## Support

`@pandemicode/material-ui-dropzone` complies to the following support matrix.

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

## Demo

Full documentation and samples are available here [https://yuvaleros.github.io/material-ui-dropzone](https://yuvaleros.github.io/material-ui-dropzone).

**Preview: Dialog Component** with drag'n'drop effects for accepted and rejected files.

<img src="pics/dropzone.gif" alt="drawing" width="100%"/>
<br>
<br>

**Disclaimer:** Drag'n'drop handling has some known limitations, see [here](https://github.com/react-dropzone/react-dropzone/tree/master/examples/accept#browser-limitations) for more details.

## Components

### DropzoneArea

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

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

### DropzoneDialog

This component provides the DropzoneArea inside of a MaterialUI Dialog.

```jsx static
import React, { Component } from 'react'
import {DropzoneDialog} from 'material-ui-dropzone'
import Button from '@material-ui/core/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)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<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>
    <td align="center"><a href="https://github.com/MatthijsMud"><img src="https://avatars3.githubusercontent.com/u/11519728?v=4" width="80px;" alt=""/><br /><sub><b>MatthijsMud</b></sub></a><br /><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>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

## Disclaimer

Material UI Dropzone original repo is here https://github.com/Yuvaleros/material-ui-dropzone.

This fork is an independent build which may incorporate more features and bug fixes and is not dependent of the original repo maintainers review process or release cycle.

Furthermore, any features or bug fixes, that result from this independent build will always be contributed back to the original repo when possible. 

This repo will also be maintained in sync with it's upstream, every time possible.