Add locale support to Upload (#5094)

components/locale-provider/en_US.tsx

@@ -36,4 +36,10 @@ export default {
   Select: {
     notFoundContent: 'Not Found',
   },
+  Upload: {
+    uploading: 'Uploading...',
+    removeFile: 'Remove file',
+    uploadError: 'Upload error',
+    previewFile: 'Preview file',
+  },
 };

components/upload/__tests__/__snapshots__/demo.test.js.snap

@@ -41,7 +41,7 @@ exports[`test renders ./components/upload/demo/defaultFileList.md correctly 1`]
         </a>
         <i
           class="anticon anticon-cross"
-          title="Remove file" />
+          title="删除文件" />
       </div>
     </div>
     <div
@@ -59,7 +59,7 @@ exports[`test renders ./components/upload/demo/defaultFileList.md correctly 1`]
         </a>
         <i
           class="anticon anticon-cross"
-          title="Remove file" />
+          title="删除文件" />
       </div>
     </div>
     <div
@@ -77,7 +77,7 @@ exports[`test renders ./components/upload/demo/defaultFileList.md correctly 1`]
         </a>
         <i
           class="anticon anticon-cross"
-          title="Remove file" />
+          title="删除文件" />
       </div>
     </div>
   </div>
@@ -118,7 +118,7 @@ exports[`test renders ./components/upload/demo/fileList.md correctly 1`] = `
         </a>
         <i
           class="anticon anticon-cross"
-          title="Remove file" />
+          title="删除文件" />
       </div>
     </div>
   </div>
@@ -158,13 +158,13 @@ exports[`test renders ./components/upload/demo/picture-card.md correctly 1`] = `
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
-              title="Preview file">
+              title="预览文件">
               <i
                 class="anticon anticon-eye-o" />
             </a>
             <i
               class="anticon anticon-delete"
-              title="Remove file" />
+              title="删除文件" />
           </span>
         </div>
       </div>
@@ -207,7 +207,7 @@ exports[`test renders ./components/upload/demo/picture-style.md correctly 1`] =
           </a>
           <i
             class="anticon anticon-cross"
-            title="Remove file" />
+            title="删除文件" />
         </div>
       </div>
       <div
@@ -232,7 +232,7 @@ exports[`test renders ./components/upload/demo/picture-style.md correctly 1`] =
           </a>
           <i
             class="anticon anticon-cross"
-            title="Remove file" />
+            title="删除文件" />
         </div>
       </div>
     </div>
@@ -268,7 +268,7 @@ exports[`test renders ./components/upload/demo/picture-style.md correctly 1`] =
           </a>
           <i
             class="anticon anticon-cross"
-            title="Remove file" />
+            title="删除文件" />
         </div>
       </div>
       <div
@@ -293,7 +293,7 @@ exports[`test renders ./components/upload/demo/picture-style.md correctly 1`] =
           </a>
           <i
             class="anticon anticon-cross"
-            title="Remove file" />
+            title="删除文件" />
         </div>
       </div>
     </div>

components/upload/index.tsx

@@ -4,7 +4,7 @@ import UploadList from './uploadList';
 import getFileItem from './getFileItem';
 import classNames from 'classnames';
 import assign from 'object-assign';
-import { UploadProps } from './interface';
+import { UploadProps, UploadLocale } from './interface';
 
 function T() {
   return true;
@@ -51,6 +51,13 @@ function genPercentAdd() {
   };
 }
 
+const defaultLocale: UploadLocale = {
+  uploading: '文件上传中',
+  removeFile: '删除文件',
+  uploadError: '上传错误',
+  previewFile: '预览文件',
+};
+
 export { UploadProps };
 
 export function Dragger(props) {
@@ -90,6 +97,14 @@ export default class Upload extends React.Component<UploadProps, any> {
     };
   }
 
+  getLocale() {
+    let locale = {};
+    if (this.context.antLocale && this.context.antLocale.Upload) {
+      locale = this.context.antLocale.Upload;
+    }
+    return assign({}, defaultLocale, locale, this.props.locale);
+  }
+
   onStart = (file) => {
     let targetItem;
     let nextFileList = this.state.fileList.concat();
@@ -264,6 +279,7 @@ export default class Upload extends React.Component<UploadProps, any> {
         onRemove={this.handleManualRemove}
         showRemoveIcon={showRemoveIcon}
         showPreviewIcon={showPreviewIcon}
+        locale={this.getLocale()}
       />
     ) : null;
 

components/upload/interface.tsx

@@ -31,6 +31,13 @@ export interface ShowUploadListInterface {
   showPreviewIcon?: boolean;
 }
 
+export interface UploadLocale {
+  uploading?: string;
+  removeFile?: string;
+  uploadError?: string;
+  previewFile?: string;
+}
+
 export interface UploadProps {
   type?: 'drag' | 'select';
   name?: string;
@@ -54,6 +61,7 @@ export interface UploadProps {
   prefixCls?: string;
   customRequest?: (option: any) => void;
   withCredentials?: boolean;
+  locale?: UploadLocale;
 }
 
 export interface UploadListProps {
@@ -65,4 +73,5 @@ export interface UploadListProps {
   prefixCls?: string;
   showRemoveIcon?: boolean;
   showPreviewIcon?: boolean;
+  locale: UploadLocale;
 }

components/upload/uploadList.tsx

@@ -66,7 +66,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
   }
 
   render() {
-    const { prefixCls, items = [], listType, showPreviewIcon, showRemoveIcon } = this.props;
+    const { prefixCls, items = [], listType, showPreviewIcon, showRemoveIcon, locale } = this.props;
     const list = items.map(file => {
       let progress;
       let icon = <Icon type="paper-clip" />;
@@ -74,7 +74,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
       if (listType === 'picture' || listType === 'picture-card') {
         if (file.status === 'uploading' || (!file.thumbUrl && !file.url)) {
           if (listType === 'picture-card') {
-            icon = <div className={`${prefixCls}-list-item-uploading-text`}>Uploading...</div>;
+            icon = <div className={`${prefixCls}-list-item-uploading-text`}>{locale.uploading}</div>;
           } else {
             icon = <Icon className={`${prefixCls}-list-item-thumbnail`} type="picture" />;
           }
@@ -133,16 +133,16 @@ export default class UploadList extends React.Component<UploadListProps, any> {
           rel="noopener noreferrer"
           style={style}
           onClick={e => this.handlePreview(file, e)}
-          title="Preview file"
+          title={locale.previewFile}
         >
           <Icon type="eye-o" />
         </a>
       ) : null;
       const removeIcon = showRemoveIcon ? (
-        <Icon type="delete" title="Remove file" onClick={() => this.handleClose(file)} />
+        <Icon type="delete" title={locale.removeFile} onClick={() => this.handleClose(file)} />
       ) : null;
       const removeIconCross = showRemoveIcon ? (
-        <Icon type="cross" title="Remove file" onClick={() => this.handleClose(file)} />
+        <Icon type="cross" title={locale.removeFile} onClick={() => this.handleClose(file)} />
       ) : null;
       const actions = (listType === 'picture-card' && file.status !== 'uploading')
         ? <span className={`${prefixCls}-list-item-actions`}>{previewIcon}{removeIcon}</span>
@@ -160,7 +160,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
       );
 
       if (file.status === 'error') {
-        const message = file.response || (file.error && file.error.statusText) || 'Upload Error';
+        const message = file.response || (file.error && file.error.statusText) || locale.uploadError;
         return (
           <Tooltip title={message} key={file.uid}>
             {item}