ant-design/components/upload/index.jsx

108 lines
2.5 KiB
React
Raw Normal View History

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';
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;
nextDownloadList.push({
2015-08-22 14:45:03 +08:00
index: fileIndex++,
uid: file.uid || '',
filename: file.name,
2015-08-27 15:45:38 +08:00
file: file,
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';
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 {
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,
});
if (type === 'drag') {
2015-08-08 23:37:35 +08:00
return (
<div className={prefixCls + ' ' + prefixCls + '-drag'}>
<Upload {...props}>
<div className={prefixCls + '-drag-container'}>
{this.props.children}
2015-08-08 23:37:35 +08:00
</div>
</Upload>
</div>
2015-08-08 23:37:35 +08:00
);
} else if (type === 'select') {
2015-08-08 23:37:35 +08:00
return (
<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>
);
}
}
});
AntUpload.Dragger = React.createClass({
render() {
2015-08-27 15:45:38 +08:00
return <AntUpload {...this.props} type="drag" style={{height: this.props.height}}/>;
}
});
export default AntUpload;