Fix image url display with non-image extention in Upload (#9936)

now we treat url following below rules:

1. `data:image..` => image
2. `http://xxx.com/xxxx.(webp|svg|png|gif|jpg|jpeg)` => image
3. `http://xxx.com/xxx.zip` other extensions => non-image
4. `data:application..` other minetypes in base64 text => non-image
5. `http://xxx.com/xxx` without any extensions => image

close #9835

close #9681

ref #9621

components/upload/UploadList.tsx

@@ -13,8 +13,24 @@ const previewFile = (file: File, callback: Function) => {
   reader.readAsDataURL(file);
 };
 
+const extname = (url: string) => {
+  if (!url) {
+    return '';
+  }
+  const temp = url.split('/');
+  const filename = temp[temp.length - 1];
+  return (/\.[^./\\]*$/.exec(filename) || [''])[0];
+};
+
 const isImageUrl = (url: string): boolean => {
-  return /^data:image\//.test(url) || /\.(webp|svg|png|gif|jpg|jpeg)$/.test(url);
+  if (/^data:image\//.test(url) || /\.(webp|svg|png|gif|jpg|jpeg)$/.test(url)) {
+    return true;
+  } else if (/^data:/.test(url)) { // other file types of base64
+    return false;
+  } else if (extname(url)) { // other file types which have extension
+    return false;
+  }
+  return true;
 };
 
 export default class UploadList extends React.Component<UploadListProps, any> {
@@ -81,14 +97,9 @@ export default class UploadList extends React.Component<UploadListProps, any> {
         } else if (!file.thumbUrl && !file.url) {
           icon = <Icon className={`${prefixCls}-list-item-thumbnail`} type="picture" />;
         } else {
-          let thumbnail = isImageUrl((file.thumbUrl || file.url) as string) ? (
-            <img src={file.thumbUrl || file.url} alt={file.name} />
-          ) : (
-            <Icon
-              type="file"
-              style={{ fontSize: 48, color: 'rgba(0,0,0,0.5)' }}
-            />
-          );
+          let thumbnail = isImageUrl((file.thumbUrl || file.url) as string)
+            ? <img src={file.thumbUrl || file.url} alt={file.name} />
+            : <Icon type="file" className={`${prefixCls}-list-item-icon`} />;
           icon = (
             <a
               className={`${prefixCls}-list-item-thumbnail`}

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

@@ -248,7 +248,7 @@ exports[`Upload List should non-image format file preview 1`] = `
     class="ant-upload-list ant-upload-list-picture"
   >
     <div
-      class="ant-upload-list-item ant-upload-list-item-removed"
+      class="ant-upload-list-item ant-upload-list-item-done"
     >
       <div
         class="ant-upload-list-item-info"
@@ -261,8 +261,7 @@ exports[`Upload List should non-image format file preview 1`] = `
             target="_blank"
           >
             <i
-              class="anticon anticon-file"
-              style="font-size: 48px; color: rgba(0, 0, 0, 0.5);"
+              class="anticon anticon-file ant-upload-list-item-icon"
             />
           </a>
           <a
@@ -270,9 +269,177 @@ exports[`Upload List should non-image format file preview 1`] = `
             href="https://cdn.xxx.com/aaa.zip"
             rel="noopener noreferrer"
             target="_blank"
-            title="xxx.png"
+            title="not-image"
           >
-            xxx.png
+            not-image
+          </a>
+        </span>
+      </div>
+      <i
+        class="anticon anticon-cross"
+        title="Remove file"
+      />
+    </div>
+    <div
+      class="ant-upload-list-item ant-upload-list-item-done"
+    >
+      <div
+        class="ant-upload-list-item-info"
+      >
+        <span>
+          <a
+            class="ant-upload-list-item-thumbnail"
+            href="https://cdn.xxx.com/aaa"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="image"
+              src="https://cdn.xxx.com/aaa"
+            />
+          </a>
+          <a
+            class="ant-upload-list-item-name"
+            href="https://cdn.xxx.com/aaa"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="image"
+          >
+            image
+          </a>
+        </span>
+      </div>
+      <i
+        class="anticon anticon-cross"
+        title="Remove file"
+      />
+    </div>
+    <div
+      class="ant-upload-list-item ant-upload-list-item-done"
+    >
+      <div
+        class="ant-upload-list-item-info"
+      >
+        <span>
+          <a
+            class="ant-upload-list-item-thumbnail"
+            href="https://cdn.xxx.com/aaa.xx"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <i
+              class="anticon anticon-file ant-upload-list-item-icon"
+            />
+          </a>
+          <a
+            class="ant-upload-list-item-name"
+            href="https://cdn.xxx.com/aaa.xx"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="not-image"
+          >
+            not-image
+          </a>
+        </span>
+      </div>
+      <i
+        class="anticon anticon-cross"
+        title="Remove file"
+      />
+    </div>
+    <div
+      class="ant-upload-list-item ant-upload-list-item-done"
+    >
+      <div
+        class="ant-upload-list-item-info"
+      >
+        <span>
+          <a
+            class="ant-upload-list-item-thumbnail"
+            href="https://cdn.xxx.com/aaa.png/xx.xx"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <i
+              class="anticon anticon-file ant-upload-list-item-icon"
+            />
+          </a>
+          <a
+            class="ant-upload-list-item-name"
+            href="https://cdn.xxx.com/aaa.png/xx.xx"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="not-image"
+          >
+            not-image
+          </a>
+        </span>
+      </div>
+      <i
+        class="anticon anticon-cross"
+        title="Remove file"
+      />
+    </div>
+    <div
+      class="ant-upload-list-item ant-upload-list-item-done"
+    >
+      <div
+        class="ant-upload-list-item-info"
+      >
+        <span>
+          <a
+            class="ant-upload-list-item-thumbnail"
+            href="https://cdn.xxx.com/xx.xx/aaa.png"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="image"
+              src="https://cdn.xxx.com/xx.xx/aaa.png"
+            />
+          </a>
+          <a
+            class="ant-upload-list-item-name"
+            href="https://cdn.xxx.com/xx.xx/aaa.png"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="image"
+          >
+            image
+          </a>
+        </span>
+      </div>
+      <i
+        class="anticon anticon-cross"
+        title="Remove file"
+      />
+    </div>
+    <div
+      class="ant-upload-list-item ant-upload-list-item-done"
+    >
+      <div
+        class="ant-upload-list-item-info"
+      >
+        <span>
+          <a
+            class="ant-upload-list-item-thumbnail"
+            href="https://cdn.xxx.com/xx.xx/aaa.png"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="image"
+              src="data:image/png;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk"
+            />
+          </a>
+          <a
+            class="ant-upload-list-item-name"
+            href="https://cdn.xxx.com/xx.xx/aaa.png"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="image"
+          >
+            image
           </a>
         </span>
       </div>

components/upload/__tests__/uploadlist.test.js

@@ -265,12 +265,44 @@ describe('Upload List', () => {
   it('should non-image format file preview', () => {
     const list = [
       {
-        ...fileList[0],
+        name: 'not-image',
+        status: 'done',
         uid: -3,
         url: 'https://cdn.xxx.com/aaa.zip',
         thumbUrl: 'data:application/zip;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk',
         originFileObj: new File([], 'aaa.zip'),
       },
+      {
+        name: 'image',
+        status: 'done',
+        uid: -4,
+        url: 'https://cdn.xxx.com/aaa',
+      },
+      {
+        name: 'not-image',
+        status: 'done',
+        uid: -5,
+        url: 'https://cdn.xxx.com/aaa.xx',
+      },
+      {
+        name: 'not-image',
+        status: 'done',
+        uid: -6,
+        url: 'https://cdn.xxx.com/aaa.png/xx.xx',
+      },
+      {
+        name: 'image',
+        status: 'done',
+        uid: -6,
+        url: 'https://cdn.xxx.com/xx.xx/aaa.png',
+      },
+      {
+        name: 'image',
+        status: 'done',
+        uid: -6,
+        url: 'https://cdn.xxx.com/xx.xx/aaa.png',
+        thumbUrl: 'data:image/png;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk',
+      },
     ];
 
     const wrapper = mount(

components/upload/interface.tsx

@@ -17,6 +17,7 @@ export interface UploadFile {
   status?: UploadFileStatus;
   percent?: number;
   thumbUrl?: string;
+  isNotImage?: boolean;
   originFileObj?: File;
   response?: any;
   error?: any;

components/upload/style/index.less

@@ -232,6 +232,17 @@
       position: absolute;
       top: 8px;
       left: 8px;
+      text-align: center;
+    }
+
+    .@{upload-item}-icon {
+      color: @disabled-color;
+      font-size: 36px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -18px;
+      margin-left: -18px;
     }
 
     .@{upload-item}-thumbnail img {