2015-08-08 23:37:35 +08:00
|
|
|
import React from 'react';
|
|
|
|
import Upload from 'rc-upload';
|
|
|
|
import assign from 'object-assign';
|
|
|
|
import Message from '../message';
|
2015-08-09 18:00:20 +08:00
|
|
|
import UploadList from './uploadList';
|
2015-08-08 23:37:35 +08:00
|
|
|
const prefixCls = 'ant-upload';
|
|
|
|
|
2015-08-09 18:00:20 +08:00
|
|
|
let AntUpload = React.createClass({
|
2015-08-08 23:37:35 +08:00
|
|
|
getInitialState() {
|
|
|
|
return {
|
|
|
|
downloadList: []
|
|
|
|
};
|
|
|
|
},
|
|
|
|
handleStart(file) {
|
2015-08-09 18:00:20 +08:00
|
|
|
var i = this.state.downloadList.length;
|
|
|
|
var nextDownloadList = this.state.downloadList;
|
|
|
|
nextDownloadList.push({
|
|
|
|
id: i,
|
|
|
|
uid: file.uid || '',
|
|
|
|
filename: file.name,
|
|
|
|
status: 'downloading'
|
|
|
|
});
|
|
|
|
this.setState({
|
|
|
|
downloadList: nextDownloadList
|
|
|
|
});
|
2015-08-08 23:37:35 +08:00
|
|
|
},
|
|
|
|
handleSuccess(ret, file) {
|
2015-08-21 14:46:12 +08:00
|
|
|
let matchWay = (!file.uid) ? 'byName' : 'byUid';
|
2015-08-08 23:37:35 +08:00
|
|
|
Message.success(file.name + '上传完成');
|
2015-08-21 14:46:12 +08:00
|
|
|
for (let i = 0; i < this.state.downloadList.length; i++) {
|
2015-08-09 18:13:46 +08:00
|
|
|
if (matchWay === 'byName') {
|
|
|
|
if (this.state.downloadList[i].filename === file.name) {
|
2015-08-08 23:37:35 +08:00
|
|
|
this.state.downloadList[i].status = 'done';
|
|
|
|
}
|
2015-08-09 18:13:46 +08:00
|
|
|
} else {
|
|
|
|
if (this.state.downloadList[i].uid === file.uid) {
|
2015-08-08 23:37:35 +08:00
|
|
|
this.state.downloadList[i].status = 'done';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2015-08-09 18:00:20 +08:00
|
|
|
this.setState({
|
|
|
|
downloadList: this.state.downloadList
|
|
|
|
});
|
2015-08-08 23:37:35 +08:00
|
|
|
},
|
|
|
|
handleProgress() {
|
|
|
|
},
|
|
|
|
handleError() {
|
|
|
|
Message.error('上传失败');
|
|
|
|
},
|
|
|
|
getDefaultProps() {
|
|
|
|
return {
|
2015-08-09 18:00:20 +08:00
|
|
|
type: 'select',
|
|
|
|
name: '',
|
2015-08-08 23:37:35 +08:00
|
|
|
multipart: false,
|
|
|
|
action: '',
|
|
|
|
data: {},
|
|
|
|
accept: '',
|
|
|
|
uploadTip: '',
|
|
|
|
start: function() {},
|
|
|
|
error: function() {},
|
|
|
|
success: function() {},
|
|
|
|
progress: function() {}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
render() {
|
2015-08-09 18:00:20 +08:00
|
|
|
var type = this.props.type || 'select';
|
2015-08-08 23:37:35 +08:00
|
|
|
var props = assign({}, this.props);
|
|
|
|
|
|
|
|
props.onStart = (file) => {
|
|
|
|
this.handleStart(file);
|
|
|
|
props.start.call(this, file);
|
|
|
|
};
|
|
|
|
props.onSuccess = (ret, file) => {
|
|
|
|
this.handleSuccess(ret, file);
|
|
|
|
props.success.call(this, ret, file);
|
|
|
|
};
|
|
|
|
props.onProgress = (step) => {
|
|
|
|
this.handleProgress(step);
|
|
|
|
props.progress.call(this, step);
|
|
|
|
};
|
2015-08-14 14:17:22 +08:00
|
|
|
props.onError = (err, responce, file) => {
|
2015-08-08 23:37:35 +08:00
|
|
|
this.handleError(err);
|
2015-08-14 14:17:22 +08:00
|
|
|
props.error.call(this, err, responce, file);
|
2015-08-08 23:37:35 +08:00
|
|
|
};
|
2015-08-09 18:00:20 +08:00
|
|
|
if (type === 'drag') {
|
2015-08-08 23:37:35 +08:00
|
|
|
return (
|
2015-08-21 14:46:12 +08:00
|
|
|
<div className={prefixCls + ' ' + prefixCls + '-drag'}>
|
|
|
|
<Upload {...props}>
|
2015-08-09 18:00:20 +08:00
|
|
|
<div className={prefixCls + '-drag-container'}>
|
|
|
|
{this.props.children}
|
2015-08-08 23:37:35 +08:00
|
|
|
</div>
|
2015-08-21 14:46:12 +08:00
|
|
|
</Upload>
|
|
|
|
</div>
|
2015-08-08 23:37:35 +08:00
|
|
|
);
|
2015-08-09 18:00:20 +08:00
|
|
|
} else if (type === 'select') {
|
2015-08-08 23:37:35 +08:00
|
|
|
return (
|
2015-08-21 14:46:12 +08:00
|
|
|
<div>
|
|
|
|
<div className={prefixCls + ' ' + prefixCls + '-select'}>
|
|
|
|
<Upload {...props}>
|
|
|
|
{this.props.children}
|
|
|
|
</Upload>
|
|
|
|
</div>
|
2015-08-09 18:00:20 +08:00
|
|
|
<UploadList items={this.state.downloadList} />
|
2015-08-08 23:37:35 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
2015-08-09 18:00:20 +08:00
|
|
|
|
|
|
|
AntUpload.Dragger = React.createClass({
|
|
|
|
render() {
|
|
|
|
return <AntUpload {...this.props} type="drag" style={{height: this.props.height}} />;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
export default AntUpload;
|