Merge pull request ant-design#16390 from ant-design/improve-upload-demo

chore: Improve upload demo

components/upload/demo/avatar.md

@@ -71,7 +71,7 @@ class Avatar extends React.Component {
         listType="picture-card"
         className="avatar-uploader"
         showUploadList={false}
-        action="//jsonplaceholder.typicode.com/posts/"
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
         beforeUpload={beforeUpload}
         onChange={this.handleChange}
       >

components/upload/demo/basic.md

@@ -20,7 +20,7 @@ import {
 
 const props = {
   name: 'file',
-  action: '//jsonplaceholder.typicode.com/posts/',
+  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
   headers: {
     authorization: 'authorization-text',
   },

components/upload/demo/defaultFileList.md

@@ -17,7 +17,7 @@ Use `defaultFileList` for uploaded files when page init.
 import { Upload, Button, Icon } from 'antd';
 
 const props = {
-  action: '//jsonplaceholder.typicode.com/posts/',
+  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
   onChange({ file, fileList }) {
     if (file.status !== 'uploading') {
       console.log(file, fileList);

components/upload/demo/directory.md

@@ -17,7 +17,7 @@ You can select and upload a whole directory.
 import { Upload, Button, Icon } from 'antd';
 
 ReactDOM.render(
-  <Upload action="//jsonplaceholder.typicode.com/posts/" directory>
+  <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
     <Button>
       <Icon type="upload" /> Upload Directory
     </Button>

components/upload/demo/drag.md

@@ -25,7 +25,7 @@ const Dragger = Upload.Dragger;
 const props = {
   name: 'file',
   multiple: true,
-  action: '//jsonplaceholder.typicode.com/posts/',
+  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
   onChange(info) {
     const status = info.file.status;
     if (status !== 'uploading') {

components/upload/demo/fileList.md

@@ -13,8 +13,6 @@ title:
 
 2) 读取远程路径并显示链接。
 
-3) 按照服务器返回信息筛选成功上传的文件。
-
 ## en-US
 
 You can gain full control over filelist by configuring `fileList`. You can accomplish all kinds of customed functions. The following shows three circumstances:
@@ -23,8 +21,6 @@ You can gain full control over filelist by configuring `fileList`. You can accom
 
 2) read from response and show file link.
 
-3) filter successfully uploaded files according to response from server.
-
 ````jsx
 import { Upload, Button, Icon } from 'antd';
 
@@ -39,7 +35,7 @@ class MyUpload extends React.Component {
   }
 
   handleChange = (info) => {
-    let fileList = info.fileList;
+    let fileList = [...info.fileList];
 
     // 1. Limit the number of uploaded files
     // Only to show two recent uploaded files, and old ones will be replaced by the new
@@ -54,20 +50,12 @@ class MyUpload extends React.Component {
       return file;
     });
 
-    // 3. Filter successfully uploaded files according to response from server
-    fileList = fileList.filter((file) => {
-      if (file.response) {
-        return file.response.status === 'success';
-      }
-      return false;
-    });
-
     this.setState({ fileList });
   }
 
   render() {
     const props = {
-      action: '//jsonplaceholder.typicode.com/posts/',
+      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
       onChange: this.handleChange,
       multiple: true,
     };

components/upload/demo/picture-card.md

@@ -50,7 +50,7 @@ class PicturesWall extends React.Component {
     return (
       <div className="clearfix">
         <Upload
-          action="//jsonplaceholder.typicode.com/posts/"
+          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
           listType="picture-card"
           fileList={fileList}
           onPreview={this.handlePreview}

components/upload/demo/picture-style.md

@@ -31,13 +31,13 @@ const fileList = [{
 }];
 
 const props = {
-  action: '//jsonplaceholder.typicode.com/posts/',
+  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
   listType: 'picture',
   defaultFileList: [...fileList],
 };
 
 const props2 = {
-  action: '//jsonplaceholder.typicode.com/posts/',
+  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
   listType: 'picture',
   defaultFileList: [...fileList],
   className: 'upload-list-inline',

components/upload/demo/upload-manually.md

@@ -38,7 +38,7 @@ class Demo extends React.Component {
 
     // You can use any AJAX library you like
     reqwest({
-      url: '//jsonplaceholder.typicode.com/posts/',
+      url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
       method: 'post',
       processData: false,
       data: formData,