Skip to content

A Material-UI file-upload dropzone. Written in TypeScript.

License

Notifications You must be signed in to change notification settings

Deckstar/mui-file-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 mui-file-dropzone

or

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 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 "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.

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):


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!

About

A Material-UI file-upload dropzone. Written in TypeScript.

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 96.3%
  • JavaScript 3.7%