From 0805a2b50c28adebaaa256295f4c46585602c66d Mon Sep 17 00:00:00 2001
From: Danial Soheili <33312687+ds1371dani@users.noreply.github.com>
Date: Tue, 31 Jan 2023 10:01:34 +0330
Subject: [PATCH] Feat/upload list shape (#40134)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 STYLE: add **picture-circle** to `listType`

* 📖 DOC: update API table

* Update components/upload/index.en-US.md

Co-authored-by: lijianan <574980606@qq.com>

* Update components/upload/index.zh-CN.md

Co-authored-by: lijianan <574980606@qq.com>

* Update components/upload/Upload.tsx

Co-authored-by: Amumu <yoyo837@hotmail.com>

* 👌 IMPROVE: classNames

* 👌 IMPROVE: add missing className

* 📖 DOC: update Upload demo for icons

* 👌 IMPROVE: classNames order

* 🧪 TEST: update snapshots

* 👌 IMPROVE: Upload list classNames & snapshots

* 📖 DOC: add new demo & revert previous ones

* Update components/upload/index.zh-CN.md

Co-authored-by: Amumu <yoyo837@hotmail.com>

* Update components/upload/index.en-US.md

Co-authored-by: Amumu <yoyo837@hotmail.com>

* Update components/upload/index.zh-CN.md

Co-authored-by: Amumu <yoyo837@hotmail.com>

---------

Co-authored-by: lijianan <574980606@qq.com>
Co-authored-by: Amumu <yoyo837@hotmail.com>
---
 components/upload/Upload.tsx                  |   7 +-
 components/upload/UploadList/ListItem.tsx     |  19 +-
 components/upload/UploadList/index.tsx        |   9 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 446 ++++++++++++++++--
 .../__tests__/__snapshots__/demo.test.ts.snap | 422 +++++++++++++++--
 components/upload/demo/avatar.tsx             |  35 +-
 components/upload/demo/file-type.tsx          |   2 +-
 components/upload/demo/picture-circle.md      |   7 +
 components/upload/demo/picture-circle.tsx     |  79 ++++
 components/upload/index.en-US.md              |   3 +-
 components/upload/index.zh-CN.md              |   3 +-
 components/upload/interface.tsx               |   2 +-
 components/upload/style/picture.ts            |  24 +-
 13 files changed, 931 insertions(+), 127 deletions(-)
 create mode 100644 components/upload/demo/picture-circle.md
 create mode 100644 components/upload/demo/picture-circle.tsx

diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index c71d49b657c9..c90476172927 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -428,12 +428,15 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
 
   const uploadButton = renderUploadButton(children ? undefined : { display: 'none' });
 
-  if (listType === 'picture-card') {
+  if (listType === 'picture-card' || listType === 'picture-circle') {
     return wrapSSR(
       <span
         className={classNames(
           `${prefixCls}-wrapper`,
-          `${prefixCls}-picture-card-wrapper`,
+          {
+            [`${prefixCls}-picture-card-wrapper`]: listType === 'picture-card',
+            [`${prefixCls}-picture-circle-wrapper`]: listType === 'picture-circle',
+          },
           rtlCls,
           className,
           hashId,
diff --git a/components/upload/UploadList/ListItem.tsx b/components/upload/UploadList/ListItem.tsx
index 52ec5e081818..3ab5bd121e64 100644
--- a/components/upload/UploadList/ListItem.tsx
+++ b/components/upload/UploadList/ListItem.tsx
@@ -96,7 +96,7 @@ const ListItem = React.forwardRef(
 
     const iconNode = iconRender(file);
     let icon = <div className={`${prefixCls}-icon`}>{iconNode}</div>;
-    if (listType === 'picture' || listType === 'picture-card') {
+    if (listType === 'picture' || listType === 'picture-card' || listType === 'picture-circle') {
       if (mergedStatus === 'uploading' || (!file.thumbUrl && !file.url)) {
         const uploadingClassName = classNames({
           [`${prefixCls}-list-item-thumbnail`]: true,
@@ -161,7 +161,7 @@ const ListItem = React.forwardRef(
             locale.downloadFile,
           )
         : null;
-    const downloadOrDelete = listType !== 'picture-card' && (
+    const downloadOrDelete = listType !== 'picture-card' && listType !== 'picture-circle' && (
       <span
         key="download-delete"
         className={classNames(`${prefixCls}-list-item-actions`, {
@@ -220,13 +220,14 @@ const ListItem = React.forwardRef(
       </a>
     ) : null;
 
-    const pictureCardActions = listType === 'picture-card' && mergedStatus !== 'uploading' && (
-      <span className={`${prefixCls}-list-item-actions`}>
-        {previewIcon}
-        {mergedStatus === 'done' && downloadIcon}
-        {removeIcon}
-      </span>
-    );
+    const pictureCardActions = (listType === 'picture-card' || listType === 'picture-circle') &&
+      mergedStatus !== 'uploading' && (
+        <span className={`${prefixCls}-list-item-actions`}>
+          {previewIcon}
+          {mergedStatus === 'done' && downloadIcon}
+          {removeIcon}
+        </span>
+      );
 
     const { getPrefixCls } = React.useContext(ConfigContext);
     const rootPrefixCls = getPrefixCls();
diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx
index 5939f9627890..36af24e5cb30 100644
--- a/components/upload/UploadList/index.tsx
+++ b/components/upload/UploadList/index.tsx
@@ -48,7 +48,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
 
   // ============================= Effect =============================
   React.useEffect(() => {
-    if (listType !== 'picture' && listType !== 'picture-card') {
+    if (listType !== 'picture' && listType !== 'picture-card' && listType !== 'picture-circle') {
       return;
     }
     (items || []).forEach((file: InternalUploadFile) => {
@@ -107,7 +107,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
     let icon: React.ReactNode = isLoading ? <LoadingOutlined /> : <PaperClipOutlined />;
     if (listType === 'picture') {
       icon = isLoading ? <LoadingOutlined /> : fileIcon;
-    } else if (listType === 'picture-card') {
+    } else if (listType === 'picture-card' || listType === 'picture-circle') {
       icon = isLoading ? locale.uploading : fileIcon;
     }
     return icon;
@@ -172,7 +172,8 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
     })),
   ];
 
-  const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
+  const animationDirection =
+    listType === 'picture-card' || listType === 'picture-circle' ? 'animate-inline' : 'animate';
   // const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
 
   let motionConfig: Omit<CSSMotionListProps, 'onVisibleChanged'> = {
@@ -194,7 +195,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
     return motion;
   }, [rootPrefixCls]);
 
-  if (listType !== 'picture-card') {
+  if (listType !== 'picture-card' && listType !== 'picture-circle') {
     motionConfig = {
       ...listItemMotion,
       ...motionConfig,
diff --git a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
index 6a90d24aa711..308d0e811d01 100644
--- a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,57 +1,110 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/upload/demo/avatar.tsx extend context correctly 1`] = `
-<span
-  class="ant-upload-wrapper ant-upload-picture-card-wrapper avatar-uploader"
->
-  <div
-    class="ant-upload ant-upload-select"
+Array [
+  <span
+    class="ant-upload-wrapper ant-upload-picture-card-wrapper avatar-uploader"
   >
-    <span
-      class="ant-upload"
-      role="button"
-      tabindex="0"
+    <div
+      class="ant-upload ant-upload-select"
     >
-      <input
-        accept=""
-        style="display:none"
-        type="file"
-      />
-      <div>
-        <span
-          aria-label="plus"
-          class="anticon anticon-plus"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="plus"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
+      <span
+        class="ant-upload"
+        role="button"
+        tabindex="0"
+      >
+        <input
+          accept=""
+          style="display:none"
+          type="file"
+        />
+        <div>
+          <span
+            aria-label="plus"
+            class="anticon anticon-plus"
+            role="img"
           >
-            <defs>
-              <style />
-            </defs>
-            <path
-              d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-            />
-            <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-            />
-          </svg>
-        </span>
-        <div
-          style="margin-top:8px"
-        >
-          Upload
+            <svg
+              aria-hidden="true"
+              data-icon="plus"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <defs>
+                <style />
+              </defs>
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+              />
+              <path
+                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              />
+            </svg>
+          </span>
+          <div
+            style="margin-top:8px"
+          >
+            Upload
+          </div>
         </div>
-      </div>
-    </span>
-  </div>
-</span>
+      </span>
+    </div>
+  </span>,
+  <span
+    class="ant-upload-wrapper ant-upload-picture-circle-wrapper avatar-uploader"
+  >
+    <div
+      class="ant-upload ant-upload-select"
+    >
+      <span
+        class="ant-upload"
+        role="button"
+        tabindex="0"
+      >
+        <input
+          accept=""
+          style="display:none"
+          type="file"
+        />
+        <div>
+          <span
+            aria-label="plus"
+            class="anticon anticon-plus"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="plus"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <defs>
+                <style />
+              </defs>
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+              />
+              <path
+                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              />
+            </svg>
+          </span>
+          <div
+            style="margin-top:8px"
+          >
+            Upload
+          </div>
+        </div>
+      </span>
+    </div>
+  </span>,
+]
 `;
 
 exports[`renders ./components/upload/demo/basic.tsx extend context correctly 1`] = `
@@ -2481,6 +2534,305 @@ exports[`renders ./components/upload/demo/picture-card.tsx extend context correc
 </span>
 `;
 
+exports[`renders ./components/upload/demo/picture-circle.tsx extend context correctly 1`] = `
+<span
+  class="ant-upload-wrapper ant-upload-picture-circle-wrapper"
+>
+  <div
+    class="ant-upload-list ant-upload-list-picture-circle"
+  >
+    <div
+      class="ant-upload-list-item-container"
+    >
+      <div
+        class="ant-upload-list-item ant-upload-list-item-done"
+      >
+        <a
+          class="ant-upload-list-item-thumbnail"
+          href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <img
+            alt="image.png"
+            class="ant-upload-list-item-image"
+            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          />
+        </a>
+        <a
+          class="ant-upload-list-item-name"
+          href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          rel="noopener noreferrer"
+          target="_blank"
+          title="image.png"
+        >
+          image.png
+        </a>
+        <span
+          class="ant-upload-list-item-actions"
+        >
+          <a
+            href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Preview file"
+          >
+            <span
+              aria-label="eye"
+              class="anticon anticon-eye"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="eye"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                />
+              </svg>
+            </span>
+          </a>
+          <button
+            class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
+            title="Remove file"
+            type="button"
+          >
+            <span
+              aria-label="delete"
+              class="anticon anticon-delete"
+              role="img"
+              tabindex="-1"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="delete"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-upload-list-item-container"
+    >
+      <div
+        class="ant-upload-list-item ant-upload-list-item-uploading"
+      >
+        <div
+          class="ant-upload-list-item-thumbnail"
+        >
+          Uploading...
+        </div>
+        <a
+          class="ant-upload-list-item-name"
+          href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          rel="noopener noreferrer"
+          target="_blank"
+          title="image.png"
+        >
+          image.png
+        </a>
+      </div>
+    </div>
+    <div
+      class="ant-upload-list-item-container"
+    >
+      <div
+        class="ant-upload-list-item ant-upload-list-item-error"
+      >
+        <div
+          class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
+        >
+          <span
+            aria-label="picture"
+            class="anticon anticon-picture"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="picture"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
+                fill="#1890ff"
+              />
+              <path
+                d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
+                fill="#e6f7ff"
+              />
+              <path
+                d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
+                fill="#e6f7ff"
+              />
+              <path
+                d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
+                fill="#e6f7ff"
+              />
+              <path
+                d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
+                fill="#1890ff"
+              />
+            </svg>
+          </span>
+        </div>
+        <span
+          class="ant-upload-list-item-name"
+          title="image.png"
+        >
+          image.png
+        </span>
+        <span
+          class="ant-upload-list-item-actions"
+        >
+          <a
+            rel="noopener noreferrer"
+            style="pointer-events:none;opacity:0.5"
+            target="_blank"
+            title="Preview file"
+          >
+            <span
+              aria-label="eye"
+              class="anticon anticon-eye"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="eye"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                />
+              </svg>
+            </span>
+          </a>
+          <button
+            class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
+            title="Remove file"
+            type="button"
+          >
+            <span
+              aria-label="delete"
+              class="anticon anticon-delete"
+              role="img"
+              tabindex="-1"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="delete"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </div>
+      <div>
+        <div
+          class="ant-tooltip"
+          style="opacity:0"
+        >
+          <div
+            class="ant-tooltip-content"
+          >
+            <div
+              class="ant-tooltip-arrow"
+            >
+              <span
+                class="ant-tooltip-arrow-content"
+              />
+            </div>
+            <div
+              class="ant-tooltip-inner"
+              role="tooltip"
+            >
+              Upload error
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-upload ant-upload-select"
+    >
+      <span
+        class="ant-upload"
+        role="button"
+        tabindex="0"
+      >
+        <input
+          accept=""
+          style="display:none"
+          type="file"
+        />
+        <div>
+          <span
+            aria-label="plus"
+            class="anticon anticon-plus"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="plus"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <defs>
+                <style />
+              </defs>
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+              />
+              <path
+                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              />
+            </svg>
+          </span>
+          <div
+            style="margin-top:8px"
+          >
+            Upload
+          </div>
+        </div>
+      </span>
+    </div>
+  </div>
+</span>
+`;
+
 exports[`renders ./components/upload/demo/picture-style.tsx extend context correctly 1`] = `
 Array [
   <span
diff --git a/components/upload/__tests__/__snapshots__/demo.test.ts.snap b/components/upload/__tests__/__snapshots__/demo.test.ts.snap
index c979129d7b9a..422acfb246e8 100644
--- a/components/upload/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/upload/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,57 +1,110 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/upload/demo/avatar.tsx correctly 1`] = `
-<span
-  class="ant-upload-wrapper ant-upload-picture-card-wrapper avatar-uploader"
->
-  <div
-    class="ant-upload ant-upload-select"
+Array [
+  <span
+    class="ant-upload-wrapper ant-upload-picture-card-wrapper avatar-uploader"
   >
-    <span
-      class="ant-upload"
-      role="button"
-      tabindex="0"
+    <div
+      class="ant-upload ant-upload-select"
     >
-      <input
-        accept=""
-        style="display:none"
-        type="file"
-      />
-      <div>
-        <span
-          aria-label="plus"
-          class="anticon anticon-plus"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="plus"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
+      <span
+        class="ant-upload"
+        role="button"
+        tabindex="0"
+      >
+        <input
+          accept=""
+          style="display:none"
+          type="file"
+        />
+        <div>
+          <span
+            aria-label="plus"
+            class="anticon anticon-plus"
+            role="img"
           >
-            <defs>
-              <style />
-            </defs>
-            <path
-              d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-            />
-            <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-            />
-          </svg>
-        </span>
-        <div
-          style="margin-top:8px"
-        >
-          Upload
+            <svg
+              aria-hidden="true"
+              data-icon="plus"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <defs>
+                <style />
+              </defs>
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+              />
+              <path
+                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              />
+            </svg>
+          </span>
+          <div
+            style="margin-top:8px"
+          >
+            Upload
+          </div>
         </div>
-      </div>
-    </span>
-  </div>
-</span>
+      </span>
+    </div>
+  </span>,
+  <span
+    class="ant-upload-wrapper ant-upload-picture-circle-wrapper avatar-uploader"
+  >
+    <div
+      class="ant-upload ant-upload-select"
+    >
+      <span
+        class="ant-upload"
+        role="button"
+        tabindex="0"
+      >
+        <input
+          accept=""
+          style="display:none"
+          type="file"
+        />
+        <div>
+          <span
+            aria-label="plus"
+            class="anticon anticon-plus"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="plus"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <defs>
+                <style />
+              </defs>
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+              />
+              <path
+                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              />
+            </svg>
+          </span>
+          <div
+            style="margin-top:8px"
+          >
+            Upload
+          </div>
+        </div>
+      </span>
+    </div>
+  </span>,
+]
 `;
 
 exports[`renders ./components/upload/demo/basic.tsx correctly 1`] = `
@@ -2337,6 +2390,281 @@ exports[`renders ./components/upload/demo/picture-card.tsx correctly 1`] = `
 </span>
 `;
 
+exports[`renders ./components/upload/demo/picture-circle.tsx correctly 1`] = `
+<span
+  class="ant-upload-wrapper ant-upload-picture-circle-wrapper"
+>
+  <div
+    class="ant-upload-list ant-upload-list-picture-circle"
+  >
+    <div
+      class="ant-upload-list-item-container"
+    >
+      <div
+        class="ant-upload-list-item ant-upload-list-item-done"
+      >
+        <a
+          class="ant-upload-list-item-thumbnail"
+          href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <img
+            alt="image.png"
+            class="ant-upload-list-item-image"
+            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          />
+        </a>
+        <a
+          class="ant-upload-list-item-name"
+          href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          rel="noopener noreferrer"
+          target="_blank"
+          title="image.png"
+        >
+          image.png
+        </a>
+        <span
+          class="ant-upload-list-item-actions"
+        >
+          <a
+            href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Preview file"
+          >
+            <span
+              aria-label="eye"
+              class="anticon anticon-eye"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="eye"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                />
+              </svg>
+            </span>
+          </a>
+          <button
+            class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
+            title="Remove file"
+            type="button"
+          >
+            <span
+              aria-label="delete"
+              class="anticon anticon-delete"
+              role="img"
+              tabindex="-1"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="delete"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-upload-list-item-container"
+    >
+      <div
+        class="ant-upload-list-item ant-upload-list-item-uploading"
+      >
+        <div
+          class="ant-upload-list-item-thumbnail"
+        >
+          Uploading...
+        </div>
+        <a
+          class="ant-upload-list-item-name"
+          href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          rel="noopener noreferrer"
+          target="_blank"
+          title="image.png"
+        >
+          image.png
+        </a>
+      </div>
+    </div>
+    <div
+      class="ant-upload-list-item-container"
+    >
+      <div
+        class="ant-upload-list-item ant-upload-list-item-error"
+      >
+        <div
+          class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
+        >
+          <span
+            aria-label="picture"
+            class="anticon anticon-picture"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="picture"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
+                fill="#1890ff"
+              />
+              <path
+                d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
+                fill="#e6f7ff"
+              />
+              <path
+                d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
+                fill="#e6f7ff"
+              />
+              <path
+                d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
+                fill="#e6f7ff"
+              />
+              <path
+                d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
+                fill="#1890ff"
+              />
+            </svg>
+          </span>
+        </div>
+        <span
+          class="ant-upload-list-item-name"
+          title="image.png"
+        >
+          image.png
+        </span>
+        <span
+          class="ant-upload-list-item-actions"
+        >
+          <a
+            rel="noopener noreferrer"
+            style="pointer-events:none;opacity:0.5"
+            target="_blank"
+            title="Preview file"
+          >
+            <span
+              aria-label="eye"
+              class="anticon anticon-eye"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="eye"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                />
+              </svg>
+            </span>
+          </a>
+          <button
+            class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
+            title="Remove file"
+            type="button"
+          >
+            <span
+              aria-label="delete"
+              class="anticon anticon-delete"
+              role="img"
+              tabindex="-1"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="delete"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-upload ant-upload-select"
+    >
+      <span
+        class="ant-upload"
+        role="button"
+        tabindex="0"
+      >
+        <input
+          accept=""
+          style="display:none"
+          type="file"
+        />
+        <div>
+          <span
+            aria-label="plus"
+            class="anticon anticon-plus"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="plus"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <defs>
+                <style />
+              </defs>
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+              />
+              <path
+                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              />
+            </svg>
+          </span>
+          <div
+            style="margin-top:8px"
+          >
+            Upload
+          </div>
+        </div>
+      </span>
+    </div>
+  </div>
+</span>
+`;
+
 exports[`renders ./components/upload/demo/picture-style.tsx correctly 1`] = `
 Array [
   <span
diff --git a/components/upload/demo/avatar.tsx b/components/upload/demo/avatar.tsx
index 01646ebdf0b0..2036a9727f80 100644
--- a/components/upload/demo/avatar.tsx
+++ b/components/upload/demo/avatar.tsx
@@ -48,17 +48,30 @@ const App: React.FC = () => {
   );
 
   return (
-    <Upload
-      name="avatar"
-      listType="picture-card"
-      className="avatar-uploader"
-      showUploadList={false}
-      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-      beforeUpload={beforeUpload}
-      onChange={handleChange}
-    >
-      {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
-    </Upload>
+    <>
+      <Upload
+        name="avatar"
+        listType="picture-card"
+        className="avatar-uploader"
+        showUploadList={false}
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        beforeUpload={beforeUpload}
+        onChange={handleChange}
+      >
+        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
+      </Upload>
+      <Upload
+        name="avatar"
+        listType="picture-circle"
+        className="avatar-uploader"
+        showUploadList={false}
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        beforeUpload={beforeUpload}
+        onChange={handleChange}
+      >
+        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
+      </Upload>
+    </>
   );
 };
 
diff --git a/components/upload/demo/file-type.tsx b/components/upload/demo/file-type.tsx
index 71c9821d803e..85a7f323af84 100644
--- a/components/upload/demo/file-type.tsx
+++ b/components/upload/demo/file-type.tsx
@@ -78,7 +78,7 @@ const App: React.FC = () => {
     ];
     // console.log(1, file, listType);
     let icon = file.status === 'uploading' ? <LoadingOutlined /> : <PaperClipOutlined />;
-    if (listType === 'picture' || listType === 'picture-card') {
+    if (listType === 'picture' || listType === 'picture-card' || listType === 'picture-circle') {
       if (listType === 'picture-card' && file.status === 'uploading') {
         icon = <LoadingOutlined />; // or icon = 'uploading...';
       } else {
diff --git a/components/upload/demo/picture-circle.md b/components/upload/demo/picture-circle.md
new file mode 100644
index 000000000000..66f9d2dec649
--- /dev/null
+++ b/components/upload/demo/picture-circle.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+图片卡的替代显示。
+
+## en-US
+
+Alternative display for picture-card.
diff --git a/components/upload/demo/picture-circle.tsx b/components/upload/demo/picture-circle.tsx
new file mode 100644
index 000000000000..677861f019ef
--- /dev/null
+++ b/components/upload/demo/picture-circle.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import { Modal, Upload } from 'antd';
+import type { RcFile, UploadProps } from 'antd/es/upload';
+import type { UploadFile } from 'antd/es/upload/interface';
+
+const getBase64 = (file: RcFile): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+  });
+
+const App: React.FC = () => {
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [previewImage, setPreviewImage] = useState('');
+  const [previewTitle, setPreviewTitle] = useState('');
+  const [fileList, setFileList] = useState<UploadFile[]>([
+    {
+      uid: '-1',
+      name: 'image.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+    {
+      uid: '-xxx',
+      percent: 50,
+      name: 'image.png',
+      status: 'uploading',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+    {
+      uid: '-5',
+      name: 'image.png',
+      status: 'error',
+    },
+  ]);
+
+  const handleCancel = () => setPreviewOpen(false);
+
+  const handlePreview = async (file: UploadFile) => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj as RcFile);
+    }
+
+    setPreviewImage(file.url || (file.preview as string));
+    setPreviewOpen(true);
+    setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
+  };
+
+  const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
+    setFileList(newFileList);
+
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div style={{ marginTop: 8 }}>Upload</div>
+    </div>
+  );
+  return (
+    <>
+      <Upload
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        listType="picture-circle"
+        fileList={fileList}
+        onPreview={handlePreview}
+        onChange={handleChange}
+      >
+        {fileList.length >= 8 ? null : uploadButton}
+      </Upload>
+      <Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel}>
+        <img alt="example" style={{ width: '100%' }} src={previewImage} />
+      </Modal>
+    </>
+  );
+};
+
+export default App;
diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md
index 57438b5007f4..4d0de390b8f6 100644
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@@ -24,6 +24,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 <code src="./demo/avatar.tsx">Avatar</code>
 <code src="./demo/defaultFileList.tsx">Default Files</code>
 <code src="./demo/picture-card.tsx">Pictures Wall</code>
+<code src="./demo/picture-circle.tsx">Pictures with picture-circle type</code>
 <code src="./demo/fileList.tsx">Complete control over file list</code>
 <code src="./demo/drag.tsx">Drag and Drop</code>
 <code src="./demo/directory.tsx">Upload directory</code>
@@ -57,7 +58,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 | iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - |  |
 | isImageUrl | Customize if render &lt;img /> in thumbnail | (file: UploadFile) => boolean | [(inside implementation)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) |  |
 | itemRender | Custom item of uploadList | (originNode: ReactElement, file: UploadFile, fileList: object\[], actions: { download: function, preview: function, remove: function }) => React.ReactNode | - | 4.16.0 |
-| listType | Built-in stylesheets, support for three types: `text`, `picture` or `picture-card` | string | `text` |  |
+| listType | Built-in stylesheets, support for four types: `text`, `picture`, `picture-card` or `picture-circle` | string | `text` | `picture-circle`(5.2.0+)  |
 | maxCount | Limit the number of uploaded files. Will replace current one when `maxCount` is `1` | number | - | 4.10.0 |
 | method | The http method of upload request | string | `post` |  |
 | 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 |  |
diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md
index 77bf258329b6..2179cf9a5e29 100644
--- a/components/upload/index.zh-CN.md
+++ b/components/upload/index.zh-CN.md
@@ -25,6 +25,7 @@ demo:
 <code src="./demo/avatar.tsx">用户头像</code>
 <code src="./demo/defaultFileList.tsx">已上传的文件列表</code>
 <code src="./demo/picture-card.tsx">照片墙</code>
+<code src="./demo/picture-circle.tsx">圆形照片墙</code>
 <code src="./demo/fileList.tsx">完全控制的上传列表</code>
 <code src="./demo/drag.tsx">拖拽上传</code>
 <code src="./demo/directory.tsx">文件夹上传</code>
@@ -58,7 +59,7 @@ demo:
 | iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - |  |
 | isImageUrl | 自定义缩略图是否使用 &lt;img /> 标签进行显示 | (file: UploadFile) => boolean | [(内部实现)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) |  |
 | itemRender | 自定义上传列表项 | (originNode: ReactElement, file: UploadFile, fileList: object\[], actions: { download: function, preview: function, remove: function }) => React.ReactNode | - | 4.16.0 |
-| listType | 上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card` | string | `text` |  |
+| listType | 上传列表的内建样式，支持四种基本样式 `text`, `picture`, `picture-card` 和 `picture-circle` | string | `text` |  `picture-circle`(5.2.0+)  |
 | maxCount | 限制上传数量。当为 1 时，始终用最新上传的文件代替当前文件 | number | - | 4.10.0 |
 | method | 上传请求的 http method | string | `post` |  |
 | multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件 | boolean | false |  |
diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx
index 709e0e45d9ab..2964cf153a61 100755
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@@ -66,7 +66,7 @@ export interface UploadLocale {
 }
 
 export type UploadType = 'drag' | 'select';
-export type UploadListType = 'text' | 'picture' | 'picture-card';
+export type UploadListType = 'text' | 'picture' | 'picture-card' | 'picture-circle';
 export type UploadListProgressProps = Omit<ProgressProps, 'percent' | 'type'>;
 
 export type ItemRender<T = any> = (
diff --git a/components/upload/style/picture.ts b/components/upload/style/picture.ts
index 53a8ca1bf1d4..e8343024d41c 100644
--- a/components/upload/style/picture.ts
+++ b/components/upload/style/picture.ts
@@ -11,7 +11,11 @@ const genPictureStyle: GenerateStyle<UploadToken> = (token) => {
   return {
     [`${componentCls}-wrapper`]: {
       // ${listCls} 增加优先级
-      [`${listCls}${listCls}-picture, ${listCls}${listCls}-picture-card`]: {
+      [`
+        ${listCls}${listCls}-picture,
+        ${listCls}${listCls}-picture-card,
+        ${listCls}${listCls}-picture-circle
+      `]: {
         [itemCls]: {
           position: 'relative',
           height: uploadThumbnailSize + token.lineWidth * 2 + token.paddingXS * 2,
@@ -74,6 +78,12 @@ const genPictureStyle: GenerateStyle<UploadToken> = (token) => {
           },
         },
       },
+
+      [`${listCls}${listCls}-picture-circle ${itemCls}`]: {
+        [`&, &::before, ${itemCls}-thumbnail`]: {
+          borderRadius: '50%',
+        },
+      },
     },
   };
 };
@@ -87,7 +97,10 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
   const uploadPictureCardSize = token.uploadPicCardSize;
 
   return {
-    [`${componentCls}-wrapper${componentCls}-picture-card-wrapper`]: {
+    [`
+      ${componentCls}-wrapper${componentCls}-picture-card-wrapper,
+      ${componentCls}-wrapper${componentCls}-picture-circle-wrapper
+    `]: {
       ...clearFix(),
       display: 'inline-block',
       width: '100%',
@@ -119,7 +132,7 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
       },
 
       // list
-      [`${listCls}${listCls}-picture-card`]: {
+      [`${listCls}${listCls}-picture-card, ${listCls}${listCls}-picture-circle`]: {
         [`${listCls}-item-container`]: {
           display: 'inline-block',
           width: uploadPictureCardSize,
@@ -221,6 +234,11 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
         },
       },
     },
+    [`${componentCls}-wrapper${componentCls}-picture-circle-wrapper`]: {
+      [`${componentCls}${componentCls}-select`]: {
+        borderRadius: '50%',
+      },
+    },
   };
 };