Skip to content

Yuvaleros/material-ui-dropzone

Repository files navigation

material-ui-dropzone

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

License All Contributors

Rebuild Dist Workflow Status Update Docs Workflow Status

npm package npm downloads

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.

version React Material-UI
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

DropzoneArea

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

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.

import React, { Component } from 'react'
import {DropzoneDialog} from 'material-ui-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):


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!