@bigfishtv/cockpit/src/components/container/FileDropzone.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import classnames from 'classnames'
import { DropTarget } from 'react-dnd'

import * as DragTypes from '../../constants/DragTypes'
import { validateFiles } from '../../utils/fileUtils'

const fileTarget = {
	drop: (props, monitor, component) => {
		const files = monitor.getItem().files
		const validatedFiles = validateFiles(files, props)
		if (validatedFiles.length > 0) props.onReceivedFiles(validatedFiles)
	},
}

/**
 * Wraps children with a droppable region that gets overlaid with drag/drop messages when files are being dragged
 */
@DropTarget(DragTypes.NATIVE_FILE, fileTarget, (connect, monitor) => {
	return {
		connectDropTarget: connect.dropTarget(),
		isOver: monitor.isOver(),
		canDrop: monitor.canDrop(),
	}
})
export default class FileDropzone extends Component {
	static propTypes = {
		/** Whether or not multiple files are allowed to be dropped */
		multiple: PropTypes.bool,
		/** Subject of file extensions e.g. documents, images. Will be checked against fileTypes redux store if no extensions are provided */
		subject: PropTypes.string,
		/** Either a comma-seperated string of extensions (without spaces) or an array of extensions. Neither contain dots before extensions. */
		extensions: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
		/** Array of tank asset objects */
		files: PropTypes.arrayOf(PropTypes.object),
		/** callback for when files have been dropped in zone */
		onReceivedFiles: PropTypes.func,
	}

	static defaultProps = {
		multiple: false,
		subject: null,
		extensions: null,
		files: [],
		onReceivedFiles: files => console.warn('No onReceivedFiles prop provided for FileDropzone', files),
	}

	render() {
		const { children, canDrop, isOver, connectDropTarget, multiple, subject } = this.props
		const subjectName = (subject || 'file') + (multiple ? '(s)' : '')

		return connectDropTarget(
			<div className={classnames('file-drop-container', { dragging: canDrop, over: isOver })}>
				{canDrop && (
					<div className="file-drop-overlay">
						{!isOver && canDrop && <h3 className="file-drop-overlay-title">Drag {subjectName} here</h3>}
						{isOver && <h3 className="file-drop-overlay-title">Drop {subjectName}!</h3>}
					</div>
				)}
				{children}
			</div>
		)
	}
}