docs: update demo for upload

This commit is contained in:
Benjy Cui 2016-11-25 15:00:28 +08:00
parent bd55d21f83
commit 59e0c6a4c1
10 changed files with 172 additions and 312 deletions

View File

@ -0,0 +1,94 @@
---
order: 1
title:
zh-CN: 用户头像
en-US: Avatar
---
## zh-CN
点击上传用户头像,并使用 `beforeUpload` 限制用户上传的图片格式和大小。
> `beforeUpload` 的返回值可以是一个 Promise 以支持也支持异步检查:[示例](http://react-component.github.io/upload/examples/beforeUpload.html)。
## en-US
Click to upload user's avatar, and validate size and format of picture with `beforeUpload`.
> The return value of function `beforeUpload` can be a Promise to check asynchronously. [demo](http://react-component.github.io/upload/examples/beforeUpload.html)
````jsx
import { Upload, Icon, message } from 'antd';
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
function beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
if (!isJPG) {
message.error('You can only upload JPG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
}
return isJPG && isLt2M;
}
class Avatar extends React.Component {
state = {};
handleChange = (info) => {
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
}
}
render() {
const imageUrl = this.state.imageUrl;
return (
<Upload
className="avatar-uploader"
name="avatar"
showUploadList={false}
action="/upload.do"
beforeUpload={beforeUpload}
onChange={this.handleChange}
>
{
imageUrl ?
<img src={imageUrl} role="presentation" className="avatar" /> :
<Icon type="plus" className="avatar-uploader-trigger" />
}
</Upload>
);
}
}
ReactDOM.render(<Avatar />, mountNode);
````
````css
.avatar-uploader,
.avatar-uploader-trigger,
.avatar {
width: 150px;
height: 150px;
}
.avatar-uploader {
display: block;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
}
.avatar-uploader-trigger {
display: table-cell;
vertical-align: middle;
font-size: 28px;
color: #999;
}
````

View File

@ -1,6 +1,6 @@
---
order: 0
title:
title:
zh-CN: 点击上传
en-US: Upload by clicking
---

View File

@ -1,39 +0,0 @@
---
order: 7
title:
zh-CN: 限制用户上传的文件
en-US: Filter uploads files
---
## zh-CN
可以通过 `beforeUpload` 在文件上传之前进行干预,如限制用户只能上传 JPG 文件。
也支持异步检查,`beforeUpload` 的返回值可以是一个 Promise[示例](http://react-component.github.io/upload/examples/beforeUpload.html)。
## en-US
You can use `beforeUpload` to check whether user can upload, for example, limit file type only to be JPG. Checking can also be asynchronous. The return value can also be a Promise for function `beforeUpload`
````jsx
import { Upload, Button, Icon, message } from 'antd';
const props = {
action: '/upload.do',
multiple: true,
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
if (!isJPG) {
message.error('you can only upload JPG file~');
}
return isJPG;
},
};
ReactDOM.render(
<Upload {...props}>
<Button type="ghost">
<Icon type="upload" /> upload
</Button>
</Upload>
, mountNode);
````

View File

@ -1,5 +1,5 @@
---
order: 1
order: 2
title:
zh-CN: 传入已上传的文件
en-US: Set files that have been uploaded

View File

@ -1,18 +1,21 @@
---
order: 3
order: 5
title:
zh-CN: 拖拽上传
en-US: Upload files by dragging and dropping
en-US: Drag and Drop
---
## zh-CN
可以把文件拖入指定区域,完成上传,同样支持点击上传。
把文件拖入指定区域,完成上传,同样支持点击上传。
设置 `multiple` 后,在 `IE10+` 可以一次上传多个文件。
## en-US
You can drag files to a specific area, to upload. Meanwhile you can also upload by selecting.
We can upload serveral files at one in modern browser by setting `multiple`.
````jsx
import { Upload, Icon, message } from 'antd';
@ -20,36 +23,31 @@ const Dragger = Upload.Dragger;
const props = {
name: 'file',
multiple: true,
showUploadList: false,
action: '/upload.do',
onChange(info) {
if (info.file.status !== 'uploading') {
const status = info.file.status;
if (status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
if (status === 'done') {
message.success(`${info.file.name} file uploaded successfully.`);
} else if (info.file.status === 'error') {
} else if (status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
ReactDOM.render(
<div>
<div style={{ width: 246, height: 140 }}>
<Dragger {...props}>
<Icon type="plus" />
</Dragger>
</div>
<div style={{ marginTop: 16, height: 180 }}>
<Dragger {...props}>
<p className="ant-upload-drag-icon">
<Icon type="inbox" />
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
</Dragger>
</div>
<div style={{ marginTop: 16, height: 180 }}>
<Dragger {...props}>
<p className="ant-upload-drag-icon">
<Icon type="inbox" />
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
</Dragger>
</div>
, mountNode);
````

View File

@ -1,5 +1,5 @@
---
order: 2
order: 4
title:
zh-CN: 完全控制的上传列表
en-US: Complete control over file list

View File

@ -1,73 +0,0 @@
---
order: 9
title:
zh-CN: 上传图片原位显示
en-US: Show uploaded image in-place
---
## zh-CN
上传图片原位显示。
## en-US
Show uploaded image in-place.
```jsx
import { Upload, Icon } from 'antd';
const Demo = React.createClass({
getInitialState() {
return {};
},
handleChange(info) {
if (info.file.status === 'done') {
this.setState({
// Get this url from response in real world.
imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
});
}
},
render() {
const imageUrl = this.state.imageUrl;
return (
<Upload
className="avatar-uploader"
name="avatar"
showUploadList={false}
action="/upload.do"
onChange={this.handleChange}
>
{
imageUrl ?
<img src={imageUrl} role="presentation" className="avatar" /> :
<Icon type="plus" className="avatar-uploader-trigger" />
}
</Upload>
);
},
});
ReactDOM.render(<Demo />, mountNode);
```
```css
.avatar-uploader,
.avatar-uploader-trigger,
.avatar {
width: 150px;
height: 150px;
}
.avatar-uploader {
display: block;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
}
.avatar-uploader-trigger {
display: table-cell;
vertical-align: middle;
font-size: 28px;
color: #999;
}
```

View File

@ -1,36 +0,0 @@
---
order: 5
debug: true
title:
zh-CN: 多文件选择
en-US: Multifile Selection
---
For debugging.
````jsx
import { Upload, message, Button, Icon } from 'antd';
const props = {
action: '/upload.do',
multiple: true,
onChange(info) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} upload successfully。`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} upload unsuccessfully。`);
}
},
};
ReactDOM.render(
<Upload {...props}>
<Button type="ghost">
<Icon type="upload" /> upload
</Button>
</Upload>
, mountNode);
````

View File

@ -1,74 +1,72 @@
---
order: 8
order: 3
title:
zh-CN: 图片卡片样式
en-US: Pictures with card tyle
zh-CN: 照片墙
en-US: Pictures Wall
---
## zh-CN
上传文件为图片,可展示本地缩略图
用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后,上传按钮消失
## en-US
If uploade file is picture, a thumbnail can be shown.
After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
````jsx
import { Upload, Icon, Modal } from 'antd';
const ImageUploadList = React.createClass({
getInitialState() {
return {
previewVisible: false,
previewImage: '',
};
},
handleCancel() {
class PicturesWall extends React.Component {
state = {
previewVisible: false,
previewImage: '',
fileList: [{
uid: -1,
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}],
};
handleCancel = () => this.setState({ previewVisible: false })
handlePreview = (file) => {
this.setState({
previewVisible: false,
previewImage: file.url || file.thumbUrl,
previewVisible: true,
});
},
}
handleChange = ({ fileList }) => this.setState({ fileList })
render() {
const props = {
action: '/upload.do',
listType: 'picture-card',
defaultFileList: [{
uid: -1,
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}],
onPreview: (file) => {
this.setState({
previewImage: file.url || file.thumbUrl,
previewVisible: true,
});
},
};
const { previewVisible, previewImage, fileList } = this.state;
const uploadButton = (
<div>
<Icon type="plus" />
<div className="ant-upload-text">Upload</div>
</div>
);
return (
<div className="clearfix">
<Upload {...props}>
<Icon type="plus" />
<div className="ant-upload-text">Upload</div>
</Upload>
<a
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
target="_blank"
rel="noopener noreferrer"
className="upload-example"
<Upload
action="/upload.do"
listType="picture-card"
fileList={fileList}
onPreview={this.handlePreview}
onChange={this.handleChange}
>
<img alt="example" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
<span>sample</span>
</a>
<Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
<img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
{fileList.length >= 3 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
);
},
});
}
}
ReactDOM.render(<ImageUploadList />, mountNode);
ReactDOM.render(<PicturesWall />, mountNode);
````
````css
@ -83,42 +81,4 @@ ReactDOM.render(<ImageUploadList />, mountNode);
font-size: 12px;
color: #666;
}
.upload-example {
position: relative;
display: inline-block;
height: 96px;
width: 96px;
padding: 8px;
border: 1px solid #d9d9d9;
border-radius: 6px;
vertical-align: top;
}
.upload-example img {
height: 78px;
width: 78px;
}
.upload-example:before {
position: absolute;
bottom: 8px;
left: 8px;
content: ' ';
width: 78px;
height: 24px;
background-color: #808080;
opacity: .8;
}
.upload-example span {
position: absolute;
bottom: 8px;
left: 8px;
width: 78px;
height: 24px;
color: #fff;
line-height: 24px;
text-align: center;
}
````

View File

@ -1,15 +1,13 @@
exports[`test renders ./components/upload/demo/basic.md correctly 1`] = `
exports[`test renders ./components/upload/demo/avatar.md correctly 1`] = `
<span
class="">
class="avatar-uploader">
<div
class="ant-upload ant-upload-select ant-upload-select-text"
style="display:;" />
<div
class="ant-upload-list ant-upload-list-text" />
</span>
`;
exports[`test renders ./components/upload/demo/beforeUpload.md correctly 1`] = `
exports[`test renders ./components/upload/demo/basic.md correctly 1`] = `
<span
class="">
<div
@ -69,23 +67,13 @@ exports[`test renders ./components/upload/demo/defaultFileList.md correctly 1`]
`;
exports[`test renders ./components/upload/demo/drag.md correctly 1`] = `
<div>
<div
style="width:246px;height:140px;">
<span
class="">
<div
class="ant-upload ant-upload-drag" />
</span>
</div>
<div
style="margin-top:16px;height:180px;">
<span
class="">
<div
class="ant-upload ant-upload-drag" />
</span>
</div>
<div
style="margin-top:16px;height:180px;">
<span
class="">
<div
class="ant-upload ant-upload-drag" />
</span>
</div>
`;
@ -119,26 +107,6 @@ exports[`test renders ./components/upload/demo/fileList.md correctly 1`] = `
</span>
`;
exports[`test renders ./components/upload/demo/inplace.md correctly 1`] = `
<span
class="avatar-uploader">
<div
class="ant-upload ant-upload-select ant-upload-select-text"
style="display:;" />
</span>
`;
exports[`test renders ./components/upload/demo/multiple.md correctly 1`] = `
<span
class="">
<div
class="ant-upload ant-upload-select ant-upload-select-text"
style="display:;" />
<div
class="ant-upload-list ant-upload-list-text" />
</span>
`;
exports[`test renders ./components/upload/demo/picture-card.md correctly 1`] = `
<div
class="clearfix">
@ -185,18 +153,6 @@ exports[`test renders ./components/upload/demo/picture-card.md correctly 1`] = `
class="ant-upload ant-upload-select ant-upload-select-picture-card"
style="display:;" />
</span>
<a
class="upload-example"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank">
<img
alt="example"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
<span>
sample
</span>
</a>
</div>
`;