elemental/lib/components/FileUpload.js

React UI Framework

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var React = require('react');
var blacklist = require('blacklist');

var Button = require('./Button');
var Spinner = require('./Spinner');

module.exports = React.createClass({
	displayName: 'FileUpload',
	propTypes: {
		buttonLabelChange: React.PropTypes.string,
		buttonLabelInitial: React.PropTypes.string,
		disabled: React.PropTypes.bool,
		file: React.PropTypes.object, // https://developer.mozilla.org/en/docs/Using_files_from_web_applications
		onChange: React.PropTypes.func
	},
	getDefaultProps: function getDefaultProps() {
		return {
			buttonLabelInitial: 'Upload File',
			buttonLabelChange: 'Change File'
		};
	},
	getInitialState: function getInitialState() {
		return {
			dataURI: null,
			file: {},
			loading: false
		};
	},
	componentDidMount: function componentDidMount() {
		this.refs.fileInput.addEventListener('click', function () {
			this.value = '';
		}, false);
	},
	triggerFileBrowser: function triggerFileBrowser() {
		this.refs.fileInput.click();
	},
	handleChange: function handleChange(e) {
		var _this = this;

		var reader = new FileReader();
		var file = e.target.files[0];

		reader.readAsDataURL(file);

		reader.onloadstart = function () {
			_this.setState({
				loading: true
			});
		};
		reader.onloadend = function (upload) {
			_this.setState({
				loading: false,
				file: file,
				dataURI: upload.target.result
			});
			if (typeof _this.props.onChange === 'function') {
				_this.props.onChange(e, {
					file: file,
					dataURI: upload.target.result
				});
			}
		};
	},
	cancelUpload: function cancelUpload(e) {
		this.setState({
			dataURI: null,
			file: {}
		});
		this.props.onChange(e, null);
	},
	render: function render() {
		var _state = this.state;
		var dataURI = _state.dataURI;
		var file = _state.file;

		// props
		var props = blacklist(this.props, 'buttonClassChange', 'buttonClassInitial', 'buttonLabelChange', 'buttonLabelInitial', 'disabled', 'file', 'onChange');
		// elements
		var component = dataURI ? React.createElement(
			'div',
			{ className: 'FileUpload' },
			React.createElement(
				'div',
				{ className: 'FileUpload__image' },
				React.createElement('img', { className: 'FileUpload__image-src', src: dataURI })
			),
			React.createElement(
				'div',
				{ className: 'FileUpload__content' },
				React.createElement(
					'div',
					{ className: 'FileUpload__message' },
					file.name,
					' (',
					Math.round(file.size / 1024),
					'Kb)'
				),
				React.createElement(
					'div',
					{ className: 'FileUpload__buttons' },
					React.createElement(
						Button,
						{ onClick: this.triggerFileBrowser, disabled: this.state.loading },
						this.state.loading && React.createElement(Spinner, null),
						this.props.buttonLabelChange
					),
					React.createElement(
						Button,
						{ onClick: this.cancelUpload, type: 'link-cancel', disabled: this.state.loading },
						'Cancel'
					)
				)
			)
		) : React.createElement(
			Button,
			{ onClick: this.triggerFileBrowser, disabled: this.props.disabled || this.state.loading },
			this.state.loading ? React.createElement(Spinner, null) : null,
			this.props.buttonLabelInitial
		);

		return React.createElement(
			'div',
			null,
			component,
			React.createElement('input', _extends({ style: { display: 'none' }, type: 'file', ref: 'fileInput', onChange: this.handleChange }, props))
		);
	}
});