feat: add custom isImgurl prop to Upload Component

components/upload/Upload.tsx

@@ -241,6 +241,7 @@ class Upload extends React.Component<UploadProps, UploadState> {
       disabled,
       locale: propLocale,
       iconRender,
+      isImageUrl,
     } = this.props;
     const {
       showRemoveIcon,
@@ -265,6 +266,7 @@ class Upload extends React.Component<UploadProps, UploadState> {
         downloadIcon={downloadIcon}
         iconRender={iconRender}
         locale={{ ...locale, ...propLocale }}
+        isImageUrl={isImageUrl}
       />
     );
   };

components/upload/UploadList.tsx

@@ -26,6 +26,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
     showDownloadIcon: false,
     showPreviewIcon: true,
     previewFile: previewImage,
+    isImageUrl,
   };
 
   componentDidUpdate() {
@@ -81,12 +82,12 @@ export default class UploadList extends React.Component<UploadListProps, any> {
   };
 
   handleIconRender = (file: UploadFile) => {
-    const { listType, locale, iconRender } = this.props;
+    const { listType, locale, iconRender, isImageUrl: isImgUrl } = this.props;
     if (iconRender) {
       return iconRender(file, listType);
     }
     const isLoading = file.status === 'uploading';
-    const fileIcon = isImageUrl(file) ? <PictureTwoTone /> : <FileTwoTone />;
+    const fileIcon = isImgUrl && isImgUrl(file) ? <PictureTwoTone /> : <FileTwoTone />;
     let icon: React.ReactNode = isLoading ? <LoadingOutlined /> : <PaperClipOutlined />;
     if (listType === 'picture') {
       icon = isLoading ? <LoadingOutlined /> : fileIcon;
@@ -128,6 +129,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
       downloadIcon: customDownloadIcon,
       locale,
       progressAttr,
+      isImageUrl: isImgUrl,
     } = this.props;
     const prefixCls = getPrefixCls('upload', customizePrefixCls);
     const list = items.map(file => {
@@ -142,18 +144,19 @@ export default class UploadList extends React.Component<UploadListProps, any> {
           });
           icon = <div className={uploadingClassName}>{iconNode}</div>;
         } else {
-          const thumbnail = isImageUrl(file) ? (
-            <img
-              src={file.thumbUrl || file.url}
-              alt={file.name}
-              className={`${prefixCls}-list-item-image`}
-            />
-          ) : (
-            iconNode
-          );
+          const thumbnail =
+            isImgUrl && isImgUrl(file) ? (
+              <img
+                src={file.thumbUrl || file.url}
+                alt={file.name}
+                className={`${prefixCls}-list-item-image`}
+              />
+            ) : (
+              iconNode
+            );
           const aClassName = classNames({
             [`${prefixCls}-list-item-thumbnail`]: true,
-            [`${prefixCls}-list-item-file`]: !isImageUrl(file),
+            [`${prefixCls}-list-item-file`]: isImgUrl && !isImgUrl(file),
           });
           icon = (
             <a

components/upload/__tests__/uploadlist.test.js

@@ -738,6 +738,56 @@ describe('Upload List', () => {
     test('Blob', () => new Blob());
   });
 
+  // https://github.com/ant-design/ant-design/issues/22958
+  describe('customize isImageUrl support', () => {
+    const list = [
+      ...fileList,
+      {
+        uid: '0',
+        name: 'xxx.png',
+        status: 'done',
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        thumbUrl:
+          'http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg@!panda_style?spm=a2c4g.11186623.2.17.4dc56b29BHokyg&file=example.jpg@!panda_style',
+      },
+    ];
+    it('should not render <img /> when file.thumbUrl use "!" as separator', () => {
+      const wrapper = mount(
+        <Upload listType="picture-card" fileList={list}>
+          <button type="button">button</button>
+        </Upload>,
+      );
+      const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img');
+      expect(imgNode.length).toBe(2);
+    });
+    it('should render <img /> when custom imageUrl return true', () => {
+      const isImageUrl = jest.fn(() => {
+        return true;
+      });
+      const wrapper = mount(
+        <Upload listType="picture-card" fileList={list} isImageUrl={isImageUrl}>
+          <button type="button">button</button>
+        </Upload>,
+      );
+      const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img');
+      expect(isImageUrl).toHaveBeenCalled();
+      expect(imgNode.length).toBe(3);
+    });
+    it('should not render <img /> when custom imageUrl return false', () => {
+      const isImageUrl = jest.fn(() => {
+        return false;
+      });
+      const wrapper = mount(
+        <Upload listType="picture-card" fileList={list} isImageUrl={isImageUrl}>
+          <button type="button">button</button>
+        </Upload>,
+      );
+      const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img');
+      expect(isImageUrl).toHaveBeenCalled();
+      expect(imgNode.length).toBe(0);
+    });
+  });
+
   it('should support transformFile', done => {
     const handleTransformFile = jest.fn();
     const onChange = ({ file }) => {

components/upload/index.en-US.md

@@ -33,6 +33,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 | multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false |  |
 | name | The name of uploading file | string | 'file' |  |
 | previewFile | Customize preview file logic | (file: File \| Blob) => Promise<dataURL: string> | - |  |
+| isImageUrl | Customize if render <img /> in thumbnail | (file: UploadFile) => boolean | - |  |
 | showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` and `downloadIcon` individually | Boolean or { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, removeIcon?: React.ReactNode, downloadIcon?: React.ReactNode } | true |  |
 | supportServerRender | Need to be turned on while the server side is rendering | boolean | false |  |
 | withCredentials | ajax upload with cookie sent | boolean | false |  |

components/upload/index.zh-CN.md

@@ -34,6 +34,7 @@ title: Upload
 | multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件 | boolean | false |  |
 | name | 发到后台的文件参数名 | string | 'file' |  |
 | previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | 无 |  |
+| isImageUrl | 自定义缩略图是否使用 img 标签进行显示 | (file: UploadFile) => boolean | 无 |  |
 | showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, removeIcon?: React.ReactNode, downloadIcon?: React.ReactNode } | true |  |
 | supportServerRender | 服务端渲染时需要打开这个 | boolean | false |  |
 | withCredentials | 上传请求时是否携带 cookie | boolean | false |  |

components/upload/interface.tsx

@@ -105,6 +105,7 @@ export interface UploadProps<T = any> {
   previewFile?: PreviewFileHandler;
   transformFile?: TransformFileHandler;
   iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
+  isImageUrl?: (file: UploadFile) => boolean;
 }
 
 export interface UploadState<T = any> {
@@ -128,4 +129,5 @@ export interface UploadListProps<T = any> {
   locale: UploadLocale;
   previewFile?: PreviewFileHandler;
   iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
+  isImageUrl?: (file: UploadFile) => boolean;
 }