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-21 16:19:28 +08:00
|
|
|
import getFileItem from './getFileItem';
|
2015-08-08 23:37:35 +08:00
|
|
|
const prefixCls = 'ant-upload';
|
2015-08-22 14:45:03 +08:00
|
|
|
let fileIndex = 0;
|
2015-08-08 23:37:35 +08:00
|
|
|
|
2015-08-21 16:19:28 +08:00
|
|
|
const AntUpload = React.createClass({
|
2015-08-08 23:37:35 +08:00
|
|
|
getInitialState() {
|
|
|
|
return {
|
|
|
|
downloadList: []
|
|
|
|
};
|
|
|
|
},
|
2015-08-27 15:45:38 +08:00
|
|
|
onStart(file) {
|
2015-08-21 16:19:28 +08:00
|
|
|
let nextDownloadList = this.state.downloadList;
|
2015-08-09 18:00:20 +08:00
|
|
|
nextDownloadList.push({
|
2015-08-22 14:45:03 +08:00
|
|
|
index: fileIndex++,
|
2015-08-09 18:00:20 +08:00
|
|
|
uid: file.uid || '',
|
|
|
|
filename: file.name,
|
2015-08-27 15:45:38 +08:00
|
|
|
file: file,
|
2015-08-09 18:00:20 +08:00
|
|
|
status: 'downloading'
|
|
|
|
});
|
|
|
|
this.setState({
|
|
|
|
downloadList: nextDownloadList
|
|
|
|
});
|
2015-08-27 15:45:38 +08:00
|
|
|
this.props.onStart(file);
|
2015-08-08 23:37:35 +08:00
|
|
|
},
|
2015-08-27 15:45:38 +08:00
|
|
|
onSuccess(ret, file) {
|
2015-08-08 23:37:35 +08:00
|
|
|
Message.success(file.name + '上传完成');
|
2015-08-21 16:19:28 +08:00
|
|
|
let targetItem = getFileItem(file, this.state.downloadList);
|
|
|
|
targetItem.status = 'done';
|
2015-08-09 18:00:20 +08:00
|
|
|
this.setState({
|
|
|
|
downloadList: this.state.downloadList
|
|
|
|
});
|
2015-08-27 15:45:38 +08:00
|
|
|
this.props.onSuccess(ret, file);
|
2015-08-08 23:37:35 +08:00
|
|
|
},
|
2015-08-27 15:45:38 +08:00
|
|
|
onProgress(e, file) {
|
|
|
|
this.props.onProgress(e, file);
|
2015-08-08 23:37:35 +08:00
|
|
|
},
|
2015-08-27 15:45:38 +08:00
|
|
|
onError(err, responce, file) {
|
2015-08-08 23:37:35 +08:00
|
|
|
Message.error('上传失败');
|
2015-08-27 15:45:38 +08:00
|
|
|
this.props.onError(err, responce, file);
|
|
|
|
},
|
|
|
|
onRemove(file){
|
|
|
|
this.props.onRemove(file);
|
2015-08-08 23:37:35 +08:00
|
|
|
},
|
|
|
|
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: '',
|
2015-08-27 15:45:38 +08:00
|
|
|
onStart() {
|
|
|
|
},
|
|
|
|
onError() {
|
|
|
|
},
|
|
|
|
onSuccess() {
|
|
|
|
},
|
|
|
|
onProgress() {
|
|
|
|
}
|
2015-08-08 23:37:35 +08:00
|
|
|
};
|
|
|
|
},
|
|
|
|
render() {
|
2015-08-21 16:19:28 +08:00
|
|
|
let type = this.props.type || 'select';
|
2015-08-27 15:45:38 +08:00
|
|
|
let props = assign({}, this.props, {
|
|
|
|
onStart: this.onStart,
|
|
|
|
onError: this.onError,
|
|
|
|
onProgress: this.onProgress,
|
|
|
|
onSuccess: this.onSuccess,
|
|
|
|
});
|
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-27 15:45:38 +08:00
|
|
|
<UploadList items={this.state.downloadList} onRemove={this.onRemove}/>
|
2015-08-08 23:37:35 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
2015-08-09 18:00:20 +08:00
|
|
|
|
|
|
|
AntUpload.Dragger = React.createClass({
|
|
|
|
render() {
|
2015-08-27 15:45:38 +08:00
|
|
|
return <AntUpload {...this.props} type="drag" style={{height: this.props.height}}/>;
|
2015-08-09 18:00:20 +08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
export default AntUpload;
|