mighty-webcamjs/components/UploadFallbackNode.js

HTML5 Webcam Image Capture Library with Flash Fallback

const React = require('react');
const PropTypes = require('prop-types');
const atom = require('atom-js');

const BaseComponent = require('./BaseComponent.js');

class UploadFallbackNode extends BaseComponent {
	static propTypes = {
		webcam: PropTypes.object,
		capture: PropTypes.bool,
		className: PropTypes.string,
		model: PropTypes.object,
		cssPrefix: PropTypes.string,
		communicationChannel: PropTypes.string,
	};

	static defaultProps = {};

	state = {
		disabled: false,
	};

	handleChange = (...args) => {
		const { webcam } = this.props;

		const uploadHandler = this.props.capture_mode === webcam.constants.CAPTURE_MODE_PHOTO
			? webcam.handleImageInput
			: webcam.helpers.videoRecorder.handleFileFallbackVideoInput;

		if (this.props.onChange) {
			this.props.onChange(...args);
		}

		return uploadHandler.apply(webcam, args);
	}

	setDisabled(value) {
		this.setState({ disabled: value });
	}

	render() {
		const { webcam, capture_mode, camera } = this.props;
		const accept = webcam.constants.MODE_ACCEPTS[capture_mode];
		const capture = webcam.constants.WEBRTC_CAMERAS[camera];

		return (
			<div
				className={ `${this.props.cssPrefix}__upload-fallback ${this.props.className}` }
			>
				<input
					disabled={ this.state.disabled }
					type="file"
					accept={ accept }
					capture={ this.props.capture ? capture : false }
					onChange={ this.handleChange }
					data-channel={ this.props.communicationChannel }
				/>
			</div>
		);
	}
}

module.exports = atom.reactConnect('model', [
	'live',
	'capture_mode',
	'camera',
])(UploadFallbackNode);