Compatible with non-image format file preview in UploadList (#9621)

* Compatible with non-image format file preview in UploadList

* Add unit test about Upload List should non-image format file preview

components/upload/UploadList.tsx

@@ -13,6 +13,10 @@ const previewFile = (file: File, callback: Function) => {
   reader.readAsDataURL(file);
 };
 
+const isImageUrl = (url: string): boolean => {
+  return /^data:image\//.test(url) || /\.(webp|svg|png|gif|jpg|jpeg)$/.test(url);
+};
+
 export default class UploadList extends React.Component<UploadListProps, any> {
   static defaultProps = {
     listType: 'text',  // or picture
@@ -77,6 +81,14 @@ 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)' }}
+            />
+          );
           icon = (
             <a
               className={`${prefixCls}-list-item-thumbnail`}
@@ -85,7 +97,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <img src={file.thumbUrl || file.url} alt={file.name} />
+              {thumbnail}
             </a>
           );
         }

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

@@ -221,3 +221,66 @@ exports[`Upload List should be uploading when upload a file 2`] = `
   </div>
 </span>
 `;
+
+exports[`Upload List should non-image format file preview 1`] = `
+<span
+  class=""
+>
+  <div
+    class="ant-upload ant-upload-select ant-upload-select-picture"
+  >
+    <span
+      class="ant-upload"
+      role="button"
+      tabindex="0"
+    >
+      <input
+        accept=""
+        style="display: none;"
+        type="file"
+      />
+      <button>
+        upload
+      </button>
+    </span>
+  </div>
+  <div
+    class="ant-upload-list ant-upload-list-picture"
+  >
+    <div
+      class="ant-upload-list-item ant-upload-list-item-removed"
+    >
+      <div
+        class="ant-upload-list-item-info"
+      >
+        <span>
+          <a
+            class="ant-upload-list-item-thumbnail"
+            href="https://cdn.xxx.com/aaa.zip"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <i
+              class="anticon anticon-file"
+              style="font-size: 48px; color: rgba(0, 0, 0, 0.5);"
+            />
+          </a>
+          <a
+            class="ant-upload-list-item-name"
+            href="https://cdn.xxx.com/aaa.zip"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="xxx.png"
+          >
+            xxx.png
+          </a>
+        </span>
+      </div>
+      <i
+        class="anticon anticon-cross"
+        title="Remove file"
+      />
+    </div>
+  </div>
+</span>
+`;

components/upload/__tests__/uploadlist.test.js

@@ -261,4 +261,26 @@ describe('Upload List', () => {
     await delay(20);
     expect(wrapper.state().fileList[2].thumbUrl).not.toBeFalsy();
   });
+
+  it('should non-image format file preview', () => {
+    const list = [
+      {
+        ...fileList[0],
+        uid: -3,
+        url: 'https://cdn.xxx.com/aaa.zip',
+        thumbUrl: 'data:application/zip;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk',
+        originFileObj: new File([], 'aaa.zip'),
+      },
+    ];
+
+    const wrapper = mount(
+      <Upload
+        listType="picture"
+        defaultFileList={list}
+      >
+        <button>upload</button>
+      </Upload>
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });