ant-design/components/upload/index.tsx

321 lines
7.4 KiB
TypeScript
Raw Normal View History

2016-09-21 11:54:53 +08:00
import React from 'react';
import RcUpload from 'rc-upload';
import UploadList from './uploadList';
2015-08-21 16:19:28 +08:00
import getFileItem from './getFileItem';
import classNames from 'classnames';
2016-06-22 13:18:43 +08:00
import assign from 'object-assign';
import { UploadProps } from './interface';
function T() {
return true;
}
2015-09-16 18:48:22 +08:00
// Fix IE file.status problem
// via coping a new Object
2016-10-24 16:30:38 +08:00
function fileToObject(file): any {
2015-09-16 18:48:22 +08:00
return {
lastModified: file.lastModified,
lastModifiedDate: file.lastModifiedDate,
2015-09-20 13:56:14 +08:00
name: file.filename || file.name,
2015-09-16 18:48:22 +08:00
size: file.size,
type: file.type,
2015-09-16 20:02:29 +08:00
uid: file.uid,
response: file.response,
2015-10-31 13:27:58 +08:00
error: file.error,
percent: 0,
originFileObj: file,
status: null,
2015-10-31 13:27:58 +08:00
};
}
/**
* Progress percent: 0.1 -> 0.98
* - for ie
*/
function genPercentAdd() {
let k = 0.1;
const i = 0.01;
const end = 0.98;
return function (s) {
let start = s;
2015-10-31 13:27:58 +08:00
if (start >= end) {
return start;
}
start += k;
k = k - i;
if (k < 0.001) {
k = 0.001;
2015-10-31 13:27:58 +08:00
}
return start * 100;
2015-09-16 18:48:22 +08:00
};
}
export { UploadProps };
2016-06-22 13:18:43 +08:00
export function Dragger(props) {
2016-07-19 19:08:59 +08:00
return <Upload {...props} type="drag" style={{ height: props.height }}/>;
}
export default class Upload extends React.Component<UploadProps, any> {
2016-06-22 13:18:43 +08:00
static Dragger = Dragger;
static defaultProps = {
2016-11-22 13:48:47 +08:00
prefixCls: 'ant-upload',
type: 'select',
multiple: false,
action: '',
data: {},
accept: '',
beforeUpload: T,
showUploadList: true,
listType: 'text', // or pictrue
className: '',
disabled: false,
supportServerRender: true,
2016-07-13 11:14:24 +08:00
};
recentUploadStatus: boolean | PromiseLike<any>;
progressTimer: any;
2016-08-16 18:07:37 +08:00
refs: {
2016-08-24 16:09:55 +08:00
[key: string]: any;
2016-08-16 18:07:37 +08:00
upload: any;
};
constructor(props) {
super(props);
this.state = {
2015-11-11 00:28:05 +08:00
fileList: this.props.fileList || this.props.defaultFileList || [],
2016-05-11 09:32:33 +08:00
dragState: 'drop',
2015-08-08 23:37:35 +08:00
};
}
2016-01-15 15:56:06 +08:00
onStart = (file) => {
2015-09-19 17:05:41 +08:00
let targetItem;
2015-09-09 14:58:17 +08:00
let nextFileList = this.state.fileList.concat();
if (file.length > 0) {
targetItem = file.map(f => {
const fileObject = fileToObject(f);
fileObject.status = 'uploading';
return fileObject;
2015-09-09 14:58:17 +08:00
});
2015-11-24 17:00:34 +08:00
nextFileList = nextFileList.concat(targetItem);
2015-09-09 14:58:17 +08:00
} else {
2015-09-19 17:05:41 +08:00
targetItem = fileToObject(file);
targetItem.status = 'uploading';
nextFileList.push(targetItem);
2015-09-09 14:58:17 +08:00
}
2015-09-01 11:26:33 +08:00
this.onChange({
2015-09-19 17:05:41 +08:00
file: targetItem,
2016-05-11 09:32:33 +08:00
fileList: nextFileList,
2015-08-31 21:26:34 +08:00
});
2015-10-31 13:27:58 +08:00
// fix ie progress
if (!(window as any).FormData) {
2015-10-31 13:27:58 +08:00
this.autoUpdateProgress(0, targetItem);
}
}
2016-01-15 15:56:06 +08:00
2016-10-20 22:10:46 +08:00
autoUpdateProgress(_, file) {
2015-10-31 13:27:58 +08:00
const getPercent = genPercentAdd();
let curPercent = 0;
this.progressTimer = setInterval(() => {
curPercent = getPercent(curPercent);
this.onProgress({
2016-05-11 09:32:33 +08:00
percent: curPercent,
2015-10-31 13:27:58 +08:00
}, file);
}, 200);
}
2016-01-15 15:56:06 +08:00
removeFile(file) {
2015-09-19 17:05:41 +08:00
let fileList = this.state.fileList;
2015-08-31 18:13:16 +08:00
let targetItem = getFileItem(file, fileList);
let index = fileList.indexOf(targetItem);
2015-08-27 17:35:10 +08:00
if (index !== -1) {
2015-08-31 18:13:16 +08:00
fileList.splice(index, 1);
2015-09-01 11:26:33 +08:00
return fileList;
2015-08-27 17:35:10 +08:00
}
2015-09-01 11:26:33 +08:00
return null;
}
2016-01-15 15:56:06 +08:00
onSuccess = (response, file) => {
2015-10-31 13:27:58 +08:00
this.clearProgressTimer();
2015-09-16 20:02:29 +08:00
try {
2015-09-18 23:31:07 +08:00
if (typeof response === 'string') {
2016-03-23 18:35:35 +08:00
response = JSON.parse(response);
2015-09-18 23:31:07 +08:00
}
2016-07-19 19:08:59 +08:00
} catch (e) { /* do nothing */
}
2015-09-19 17:05:41 +08:00
let fileList = this.state.fileList;
2015-08-31 21:26:34 +08:00
let targetItem = getFileItem(file, fileList);
// removed
if (!targetItem) {
return;
2015-08-27 16:53:53 +08:00
}
targetItem.status = 'done';
targetItem.response = response;
this.onChange({
file: targetItem,
fileList,
});
}
2016-01-15 15:56:06 +08:00
onProgress = (e, file) => {
2015-09-01 11:26:33 +08:00
let fileList = this.state.fileList;
let targetItem = getFileItem(file, fileList);
// removed
if (!targetItem) {
return;
}
2015-10-31 13:27:58 +08:00
targetItem.percent = e.percent;
this.onChange({
event: e,
file: targetItem,
2016-05-11 09:32:33 +08:00
fileList: this.state.fileList,
2015-10-31 13:27:58 +08:00
});
}
2016-01-15 15:56:06 +08:00
onError = (error, response, file) => {
2015-10-31 13:27:58 +08:00
this.clearProgressTimer();
2015-09-16 20:02:29 +08:00
let fileList = this.state.fileList;
let targetItem = getFileItem(file, fileList);
// removed
if (!targetItem) {
return;
}
2015-09-16 20:02:29 +08:00
targetItem.error = error;
targetItem.response = response;
targetItem.status = 'error';
this.handleRemove(targetItem);
}
2016-01-15 15:56:06 +08:00
2016-04-07 11:39:23 +08:00
handleRemove(file) {
const { onRemove } = this.props;
// Prevent removing file
const onRemoveReturnValue = onRemove && onRemove(file);
if (onRemoveReturnValue !== false) {
let fileList = this.removeFile(file);
if (fileList) {
this.onChange({
file,
fileList,
});
}
2015-09-01 11:26:33 +08:00
}
}
2016-01-15 15:56:06 +08:00
handleManualRemove = (file) => {
this.refs.upload.abort(file);
2016-08-16 17:54:59 +08:00
file.status = 'removed'; // eslint-disable-line
this.handleRemove(file);
}
2016-01-15 15:56:06 +08:00
onChange = (info) => {
if (!('fileList' in this.props)) {
2016-07-19 20:28:56 +08:00
this.setState({ fileList: info.fileList });
}
2016-10-24 16:30:38 +08:00
const onChange = this.props.onChange;
if (onChange) {
onChange(info);
}
}
2016-01-15 15:56:06 +08:00
componentWillReceiveProps(nextProps) {
if ('fileList' in nextProps) {
this.setState({
2016-01-30 19:00:56 +08:00
fileList: nextProps.fileList || [],
});
}
}
2016-01-15 15:56:06 +08:00
onFileDrop = (e) => {
2015-11-13 16:09:39 +08:00
this.setState({
2016-05-11 09:32:33 +08:00
dragState: e.type,
2015-11-13 16:09:39 +08:00
});
}
2016-01-15 15:56:06 +08:00
2015-10-31 13:27:58 +08:00
clearProgressTimer() {
clearInterval(this.progressTimer);
}
2016-01-15 15:56:06 +08:00
2015-08-08 23:37:35 +08:00
render() {
const {
2016-11-22 13:48:47 +08:00
prefixCls = '', showUploadList, listType, onPreview,
type, disabled, children, className,
} = this.props;
const rcUploadProps = assign({}, this.props, {
2015-08-27 15:45:38 +08:00
onStart: this.onStart,
onError: this.onError,
onProgress: this.onProgress,
onSuccess: this.onSuccess,
2016-06-22 13:18:43 +08:00
});
delete rcUploadProps.className;
const { showRemoveIcon, showPreviewIcon } = showUploadList as any;
const uploadList = showUploadList ? (
<UploadList
listType={listType}
items={this.state.fileList}
onPreview={onPreview}
onRemove={this.handleManualRemove}
showRemoveIcon={showRemoveIcon}
showPreviewIcon={showPreviewIcon}
/>
) : null;
if (type === 'drag') {
const dragCls = classNames(prefixCls, {
[`${prefixCls}-drag`]: true,
[`${prefixCls}-drag-uploading`]: this.state.fileList.some(file => file.status === 'uploading'),
[`${prefixCls}-drag-hover`]: this.state.dragState === 'dragover',
[`${prefixCls}-disabled`]: disabled,
});
2015-08-08 23:37:35 +08:00
return (
<span className={className}>
<div
className={dragCls}
2016-07-19 20:28:56 +08:00
onDrop={this.onFileDrop}
onDragOver={this.onFileDrop}
onDragLeave={this.onFileDrop}
>
<RcUpload {...rcUploadProps} ref="upload" className={`${prefixCls}-btn`}>
<div className={`${prefixCls}-drag-container`}>
{children}
2015-10-31 13:27:58 +08:00
</div>
</RcUpload>
2015-10-31 13:27:58 +08:00
</div>
2015-11-13 16:09:39 +08:00
{uploadList}
</span>
2015-08-08 23:37:35 +08:00
);
}
const uploadButtonCls = classNames(prefixCls, {
[`${prefixCls}-select`]: true,
[`${prefixCls}-select-${listType}`]: true,
[`${prefixCls}-disabled`]: disabled,
});
const uploadButton = (
<div className={uploadButtonCls} style={{ display: children ? '' : 'none'}}>
<RcUpload {...rcUploadProps} ref="upload" />
</div>
);
if (listType === 'picture-card') {
2015-08-08 23:37:35 +08:00
return (
<span className={className}>
{uploadList}
{uploadButton}
2015-11-13 16:09:39 +08:00
</span>
2015-08-08 23:37:35 +08:00
);
}
return (
<span className={className}>
{uploadButton}
{uploadList}
</span>
);
2015-08-08 23:37:35 +08:00
}
}