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

Screenshots

This is the component:

When you drag a file onto the dropzone, you get a neat effect:

And if you drop in a wrong type of file, you'll get yelled at:

DropzoneArea Component

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

Usage

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;

DropzoneArea Component Properties

| Name |Type |Default |Description |----------------|-------------|------------|-------------------------------- | acceptedFiles | Array |['image/*', 'video/*', 'application/*'] | A list of file mime types to accept. Does support wildcards. | filesLimit | Number | 3 | Maximum number of files that can be loaded into the dropzone | maxFileSize | Number | 3000000 | Maximum file size (in bytes) that the dropzone will accept | dropzoneText | String | 'Drag and drop an image file here or click' | Text in dropzone | dropzoneClass | String | null | Custom CSS class name for dropzone container. | showPreviews | Boolean | false | Shows previews BELOW the Dropzone | showPreviewsInDropzone| Boolean| true | Shows preview INSIDE the dropzone | showAlerts | Boolean | true | shows styled snackbar alerts when files are dropped, deleted or rejected. | dropzoneParagraphClass | String | null | Custom CSS class name for text inside the container. | showFileNamesInPreview | Boolean | false | Shows file name under the image
| showFileNames | Boolean | false | Shows file name under the dropzone image. | initialFiles | Array | [] | A list of urls of already uploaded images. Please take care of CORS

DropzoneArea Component Events

|Name |Return Params|Description |----------------|-------------|-------------------------------- |onChange |files(array) | Fired when the user drops files into dropzone or deletes a file. Returns all the files currently loaded into the dropzone. |onDrop |files(array) | Fired when the user drops files into the dropzone. Returns the files dropped |onDropRejected |files(array) | Fired when a file is rejected because of wrong file type, size or goes beyond the filesLimit. Returns the files that were rejected |onDelete |file | Fired when a file is deleted from the previews panel.

DropzoneArea Componet Get Alert Messages

|Name |Params |Return Params|Description|Default message |-------------------------|----------|-------------|-----------|----------- |getFileLimitExceedMessage|filesLimit|String |Get alert message to display when files limit is exceed | Maximum allowed number of files exceeded. Only ${filesLimit} allowed |getFileAddedMessage |fileName |String |Get alert message to display when a new file is added | File ${fileName} successfully added. |getFileRemovedMessage |fileName |String |Get alert message to display when a file is removed | File ${fileName} removed. |getDropRejectMessage |rejectedFile, acceptedFiles, maxFileSize |String |Get alert message to display when a file is removed | File ${rejectedFile.name} was rejected..

DropzoneDialog Component

This component provides the dropzone inside of a dialog.

Usage

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

DropzoneDialog Component Properties

| Name |Type |Default |Description |----------------|-------------|------------|-------------------------------- | open | Boolean | false | Required. Sets whether the dialog is open or closed | acceptedFiles | Array |['image/*', 'video/*', 'application/*'] | A list of file mime types to accept. Does support wildcards. | filesLimit | Number | 3 | Maximum number of files that can be loaded into the dropzone | maxFileSize | Number | 3000000 | Maximum file size (in bytes) that the dropzone will accept | showPreviews | Boolean | false | Shows previews BELOW the Dropzone | showPreviewsInDropzone| Boolean| true | Shows preview INSIDE the dropzone | showAlerts | Boolean | true | shows styled snackbar alerts when files are dropped, deleted or

DropzoneDialog Component Events

|Name |Return Params|Description |----------------|-------------|-------------------------------- | onSave | files(array) | Fired when the user clicks the Submit button. | onClose | event | Fired when the modal is closed | onChange |files(array) | Fired when the user drops files into dropzone OR deletes a file. Returns all the files currently loaded into the dropzone. | onDrop |files(array) | Fired when the user drops files into the dropzone. Returns the files dropped | onDropRejected |files(array) | Fired when a file is rejected because of wrong file type, size or goes beyond the filesLimit. Returns the files that were rejected | onDelete |file | Fired when a file is deleted from the previews panel.

License

MIT