elemental/lib/components/FileDragAndDrop.js

React UI Framework

'use strict';

var React = require('react');
var classNames = require('classnames');

/*
	Based on: https://github.com/paramaggarwal/react-dropzone
*/

var Dropzone = React.createClass({
	displayName: 'Dropzone',

	propTypes: {
		className: React.PropTypes.string,
		label: React.PropTypes.string,
		labelActive: React.PropTypes.string,
		onDrop: React.PropTypes.func.isRequired
	},
	getDefaultProps: function getDefaultProps() {
		return {
			label: 'Drag Files Here',
			labelActive: 'Drop to Upload'
		};
	},
	getInitialState: function getInitialState() {
		return {
			isDragActive: false
		};
	},
	onDragLeave: function onDragLeave() {
		this.setState({
			isDragActive: false
		});
	},
	onDragOver: function onDragOver(e) {
		e.preventDefault();
		e.dataTransfer.dropEffect = 'copy';
		this.setState({
			isDragActive: true
		});
	},
	onDrop: function onDrop(e) {
		e.preventDefault();

		this.setState({
			isDragActive: false
		});

		var files;
		if (e.dataTransfer) {
			files = e.dataTransfer.files;
		} else if (e.target) {
			files = e.target.files;
		}

		if (this.props.onDrop) {
			files = Array.prototype.slice.call(files);
			this.props.onDrop(files);
		}
	},
	onClick: function onClick() {
		this.refs.fileInput.click();
	},
	render: function render() {
		var className = classNames('FileDragAndDrop', {
			'active': this.state.isDragActive
		}, this.props.className);
		return React.createElement(
			'button',
			{ className: className, type: 'button', onClick: this.onClick, onDragLeave: this.onDragLeave, onDragOver: this.onDragOver, onDrop: this.onDrop },
			React.createElement('input', { style: { display: 'none' }, type: 'file', multiple: true, ref: 'fileInput', onChange: this.onDrop }),
			React.createElement(
				'div',
				{ className: 'FileDragAndDrop__label' },
				this.state.isDragActive ? this.props.labelActive : this.props.label
			),
			this.props.children
		);
	}
});

module.exports = Dropzone;