@bigfishtv/cockpit/src/components/upload/Upload.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import plupload from '../../../lib/plupload'
import { validateFiles } from '../../utils/fileUtils'
import pluploadSettings from '../../config/pluploadSettings'
import Button from '../button/Button'

// we define this because react-docgen fails when defaultProp directly references an imported component
class DefaultInput extends Component {
	render() {
		return <Button {...this.props} type="button" />
	}
}

/**
 * Upload button that uses plupload to file select
 */
export default class Upload extends Component {
	static propTypes = {
		/** called once files have been selected and validated */
		onReceivedFiles: PropTypes.func,
		/** allow multiple file select */
		multiple: PropTypes.bool,
		/** style to be passed to button, e.g. primary, secondary, error, default */
		style: PropTypes.string,
		/** text to be passed to button */
		text: PropTypes.string,
		/** filters to be attached to plupload settings. See: http://www.plupload.com/docs/File-Filters */
		filters: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
		/** Component to replace default button component */
		Input: PropTypes.func,
	}

	static defaultProps = {
		onReceivedFiles: () => console.warn('[UploadButton] no onReceivedFiles prop'),
		multiple: false,
		style: 'default',
		text: 'Upload',
		filters: {},
		Input: DefaultInput,
	}

	componentDidMount() {
		const { multiple, filters } = this.props

		const uploaderSettings = {
			...pluploadSettings,
			max_file_size: false, // validateFiles will handle this and show alert
			browse_button: ReactDOM.findDOMNode(this.refs.button),
			container: ReactDOM.findDOMNode(this.refs.container),
			multi_selection: multiple,
			filters,
		}

		this.uploader = new plupload.Uploader(uploaderSettings)
		this.uploader.bind('FilesAdded', this.handleSelection)
		this.uploader.init()
	}

	handleSelection = (uploader, files) => {
		const nativeFiles = files.map(file => file.getNative())
		const validatedFiles = validateFiles(nativeFiles, this.props)
		if (validatedFiles.length > 0) this.props.onReceivedFiles(validatedFiles)
	}

	render() {
		const {
			Input,
			defaultAssetFolder,
			fileTypes,
			dispatch,
			extensions,
			reorderable,
			subject,
			files,
			onReceivedFiles,
			onFilesSelected,
			filters,
			...buttonProps
		} = this.props
		return (
			<div ref="container">
				<Input ref="button" {...buttonProps} />
			</div>
		)
	}
}