Exciting news!Announcing our $4.6M Series Seed. Learn more →
Socket
LoveBlogFAQ
Install
Log in

@shotskydiver/material-ui-dropzone

Package Overview
Dependencies
4
Maintainers
1
Versions
2
Issues
File Explorer

Advanced tools

@shotskydiver/material-ui-dropzone

React file-upload dropzone component built atop Material-UI v5

    4.0.2latest

Version published
Maintainers
1
Yearly downloads
5,918

Weekly downloads

Readme

Source

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 @shotskydiver/material-ui-dropzone

or

yarn add @shotskydiver/material-ui-dropzone

Support

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

versionReactMaterial-UI
3.x16.8+4.x
2.x15.x or 16.x3.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://ShotSkydiver.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 '@shotskydiver/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 '@shotskydiver/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):


ShotSkydiver

🤔 💻 ğŸŽ¨ 📖 💬 👀 🚧

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!

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc