react-zeanium-ui-ui/src/ui/Uploader.js

Zeanium UI Framework for React.js

require('./Uploader.less');
var React = require('react');
var ReactDOM = require('react-dom');

module.exports = React.createClass({
	displayName:'Uploader',
	getDefaultProps: function () {
		return {
			placeholder: 'Choose File ...',
			hiddens: {}
		};
	},
	getInitialState: function () {
		return {
			uploading: false,
			placeholder: this.props.placeholder,
			hiddens: this.props.hiddens,
			value: this.props.value,
			files: []
		}
	},
	componentDidMount:function(){

	},
	setHidden: function (key, value){
		this.state.hiddens[key] = value;
		this.setState({
			hiddens: this.state.hiddens
		});
	},
	__onIFrameLoad: function (event){
		var _target = event.target,
			_data = '';
		if (_target.contentWindow) {
			_data = _target.contentWindow.document.body ? _target.contentWindow.document.body.innerHTML : null;
        } else if (_target.contentDocument) {
			_data = _target.contentDocument.document.body ? _target.contentDocument.document.body.innerHTML : null;
        }

		var _search = _target.contentWindow.location.search;
		_data = decodeURI(_search.split('?').pop());
		/*
		var _dom = document.createElement('div');
		_dom.innerHTML = _data;
		_data = _dom.innerText || _dom.textContent;
		*/
		var data = JSON.parse(_data)||{};
		this.state.files.push(data.result.name);
		this.setState({
			placeholder: this.props.placeholder,
			files: this.state.files,
			uploading: false,
		});
		this.props.onChange && this.props.onChange(event, data, this);
		return this.props.onUploaderChange && this.props.onUploaderChange(event, data, this);
	},
	__onInputChange: function (event){
		var _value = event.nativeEvent.target.files[0].name;
		this.setState({
			placeholder: _value,
			uploading: true,
		});
		var _dom = ReactDOM.findDOMNode(this);
		_dom.submit();
		_dom.reset();
	},
	__onDeleteFile: function (item, index){
		this.state.files.splice(index, 1);
		this.forceUpdate();
	},
	__inputRender: function (item, index) {
		return <li key={index}>
			<a className="input choose-file">
				<i className="fa fa-file"></i>
				<i className="cancle fa fa-times" onClick={()=>this.__onDeleteFile(item, index)} />
				<span>{this.state.placeholder}</span>
				<input className="input" type="file" name={this.props.name} onChange={this.__onInputChange} />
			</a>
		</li>;
	},
	__fileRender: function (item, index){
		return <li key={index}>
				{item}
				<i className="cancle fa fa-times" onClick={()=>this.__onDeleteFile(item, index)} />
		</li>;
	},
	__onInputClick: function (event){
		this.props.onUploaderClick && this.props.onUploaderClick(event, this);
	},
	__onUploadCancle: function (){

	},
	render:function(){
		this._items = [];
		var _hiddens = this.state.hiddens||{};
		_hiddens['FORWORD_URL'] = window.location.origin + '/_black.html';
		return (
			<form
				className="c-uploader"
				target="uploader-target"
				encType="multipart/form-data"
				action={Store.fixURL(this.props.action||'')}
				method={this.props.method}
				style={this.props.style}>
				<iframe onLoad={this.__onIFrameLoad} className="uploader-target" name="uploader-target" />
				<div className="input choose-file">
					<i className={"icon fa fa-upload " + (this.state.uploading?'uploading':'')}></i>
					{this.state.uploading && <i className="cancle fa fa-times" onClick={this.__onUploadCancle} />}
					<span className="label">{this.state.placeholder}</span>
					<input className="input" type="file" name={this.props.name} onChange={this.__onInputChange} onClick={this.__onInputClick} />
				</div>
				{
					Object.keys(_hiddens).map(function (hidden, index){
						return <input key={'hidden_' + index} type="hidden" name={hidden} value={_hiddens[hidden]} />;
					})
				}
				<ul className="files">
					{
						this.state.files.map(this.__fileRender)
					}
				</ul>
			</form>
		);
	}
});