From 59e0c6a4c19565ecb97661d457f7573d4ef2b933 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 25 Nov 2016 15:00:28 +0800 Subject: [PATCH] docs: update demo for upload --- components/upload/demo/avatar.md | 94 +++++++++++++ components/upload/demo/basic.md | 2 +- components/upload/demo/beforeUpload.md | 39 ------ components/upload/demo/defaultFileList.md | 2 +- components/upload/demo/drag.md | 40 +++--- components/upload/demo/fileList.md | 2 +- components/upload/demo/inplace.md | 73 ---------- components/upload/demo/multiple.md | 36 ----- components/upload/demo/picture-card.md | 132 +++++++------------ tests/upload/__snapshots__/demo.test.js.snap | 64 ++------- 10 files changed, 172 insertions(+), 312 deletions(-) create mode 100644 components/upload/demo/avatar.md delete mode 100644 components/upload/demo/beforeUpload.md delete mode 100644 components/upload/demo/inplace.md delete mode 100644 components/upload/demo/multiple.md diff --git a/components/upload/demo/avatar.md b/components/upload/demo/avatar.md new file mode 100644 index 0000000000..094de3315d --- /dev/null +++ b/components/upload/demo/avatar.md @@ -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 ( + + { + imageUrl ? + : + + } + + ); + } +} + +ReactDOM.render(, 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; +} +```` diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md index c0653c0c46..9e040594ae 100644 --- a/components/upload/demo/basic.md +++ b/components/upload/demo/basic.md @@ -1,6 +1,6 @@ --- order: 0 -title: +title: zh-CN: 点击上传 en-US: Upload by clicking --- diff --git a/components/upload/demo/beforeUpload.md b/components/upload/demo/beforeUpload.md deleted file mode 100644 index 3fa1596393..0000000000 --- a/components/upload/demo/beforeUpload.md +++ /dev/null @@ -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( - - - -, mountNode); -```` diff --git a/components/upload/demo/defaultFileList.md b/components/upload/demo/defaultFileList.md index 4adb96bee3..f4ab453047 100644 --- a/components/upload/demo/defaultFileList.md +++ b/components/upload/demo/defaultFileList.md @@ -1,5 +1,5 @@ --- -order: 1 +order: 2 title: zh-CN: 传入已上传的文件 en-US: Set files that have been uploaded diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md index d24cd3c83c..7a31d1aa79 100644 --- a/components/upload/demo/drag.md +++ b/components/upload/demo/drag.md @@ -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( -
-
- - - -
-
- -

- -

-

Click or drag file to this area to upload

-

Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files

- -
+
+ +

+ +

+

Click or drag file to this area to upload

+

Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files

+
, mountNode); ```` diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md index ff369dbf10..4f1ee00d16 100644 --- a/components/upload/demo/fileList.md +++ b/components/upload/demo/fileList.md @@ -1,5 +1,5 @@ --- -order: 2 +order: 4 title: zh-CN: 完全控制的上传列表 en-US: Complete control over file list diff --git a/components/upload/demo/inplace.md b/components/upload/demo/inplace.md deleted file mode 100644 index 3b4c0b7ca9..0000000000 --- a/components/upload/demo/inplace.md +++ /dev/null @@ -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 ( - - { - imageUrl ? - : - - } - - ); - }, -}); - -ReactDOM.render(, 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; -} -``` diff --git a/components/upload/demo/multiple.md b/components/upload/demo/multiple.md deleted file mode 100644 index 61943e8b4f..0000000000 --- a/components/upload/demo/multiple.md +++ /dev/null @@ -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( - - - -, mountNode); -```` diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md index 04db2175bf..080d255035 100644 --- a/components/upload/demo/picture-card.md +++ b/components/upload/demo/picture-card.md @@ -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 = ( +
+ +
Upload
+
+ ); return (
- - -
Upload
- - - example - sample - - - example + {fileList.length >= 3 ? null : uploadButton} + + + example
); - }, -}); + } +} -ReactDOM.render(, mountNode); +ReactDOM.render(, mountNode); ```` ````css @@ -83,42 +81,4 @@ ReactDOM.render(, 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; -} ```` diff --git a/tests/upload/__snapshots__/demo.test.js.snap b/tests/upload/__snapshots__/demo.test.js.snap index 58b270968a..17c7f484db 100644 --- a/tests/upload/__snapshots__/demo.test.js.snap +++ b/tests/upload/__snapshots__/demo.test.js.snap @@ -1,15 +1,13 @@ -exports[`test renders ./components/upload/demo/basic.md correctly 1`] = ` +exports[`test renders ./components/upload/demo/avatar.md correctly 1`] = ` + class="avatar-uploader">
-
`; -exports[`test renders ./components/upload/demo/beforeUpload.md correctly 1`] = ` +exports[`test renders ./components/upload/demo/basic.md correctly 1`] = `
-
- -
- -
-
- -
- -
+
+ +
+
`; @@ -119,26 +107,6 @@ exports[`test renders ./components/upload/demo/fileList.md correctly 1`] = ` `; -exports[`test renders ./components/upload/demo/inplace.md correctly 1`] = ` - -
- -`; - -exports[`test renders ./components/upload/demo/multiple.md correctly 1`] = ` - -
-
- -`; - exports[`test renders ./components/upload/demo/picture-card.md correctly 1`] = `
@@ -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:;" /> - - example - - sample - -
`;