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

npm install --save material-ui-dropzone

or

yarn add material-ui-dropzone

Support

material-ui-dropzone complies to the following support matrix.

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

```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 ( ) } }

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 (



                <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)}
                />



        );
    }
}

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!