fix: show thumbnail for non-image files by upload onChange (#25432)

components/upload/__tests__/uploadlist.test.js

@@ -785,6 +785,65 @@ describe('Upload List', () => {
     });
   });
 
+  describe('thumbUrl support for non-image', () => {
+    const nonImageFile = new File([''], 'foo.7z', { type: 'application/x-7z-compressed' });
+    it('should render <img /> when upload non-image file and configure thumbUrl in onChange', done => {
+      let wrapper;
+      const onChange = async ({ fileList: files }) => {
+        const newfileList = files.map(item => ({
+          ...item,
+          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        }));
+        wrapper.setProps({ fileList: newfileList });
+
+        await sleep();
+        const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img');
+        expect(imgNode.length).toBe(1);
+        done();
+      };
+      wrapper = mount(
+        <Upload
+          action="http://jsonplaceholder.typicode.com/posts/"
+          listType="picture-card"
+          fileList={[]}
+          onChange={onChange}
+          customRequest={successRequest}
+        >
+          <button type="button">upload</button>
+        </Upload>,
+      );
+      const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img');
+      expect(imgNode.length).toBe(0);
+      wrapper.find('input').simulate('change', { target: { files: [nonImageFile] } });
+    });
+
+    it('should not render <img /> when upload non-image file without thumbUrl in onChange', done => {
+      let wrapper;
+      const onChange = async ({ fileList: files }) => {
+        wrapper.setProps({ fileList: files });
+
+        await sleep();
+        const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img');
+        expect(imgNode.length).toBe(0);
+        done();
+      };
+      wrapper = mount(
+        <Upload
+          action="http://jsonplaceholder.typicode.com/posts/"
+          listType="picture-card"
+          fileList={[]}
+          onChange={onChange}
+          customRequest={successRequest}
+        >
+          <button type="button">upload</button>
+        </Upload>,
+      );
+      const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img');
+      expect(imgNode.length).toBe(0);
+      wrapper.find('input').simulate('change', { target: { files: [nonImageFile] } });
+    });
+  });
+
   it('should support transformFile', done => {
     const handleTransformFile = jest.fn();
     const onChange = ({ file }) => {

components/upload/utils.tsx

@@ -45,7 +45,7 @@ const extname = (url: string = '') => {
 const isImageFileType = (type: string): boolean => type.indexOf('image/') === 0;
 
 export const isImageUrl = (file: UploadFile): boolean => {
-  if (file.type) {
+  if (file.type && !file.thumbUrl) {
     return isImageFileType(file.type);
   }
   const url: string = (file.thumbUrl || file.url) as string;