chore: pick upload patch (#43200)

components/upload/Upload.tsx

@@ -4,11 +4,12 @@ import RcUpload from 'rc-upload';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import * as React from 'react';
 import { flushSync } from 'react-dom';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale/default';
-import warning from '../_util/warning';
+import UploadList from './UploadList';
 import type {
   RcFile,
   ShowUploadListInterface,
@@ -16,7 +17,6 @@ import type {
   UploadFile,
   UploadProps,
 } from './interface';
-import UploadList from './UploadList';
 import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils';
 
 export const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`;
@@ -60,7 +60,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
 
   const [mergedFileList, setMergedFileList] = useMergedState(defaultFileList || [], {
     value: fileList,
-    postState: list => list ?? [],
+    postState: (list) => list ?? [],
   });
 
   const [dragState, setDragState] = React.useState<string>('drop');
@@ -119,7 +119,9 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
       changeInfo.event = event;
     }
 
-    onChange?.(changeInfo);
+    flushSync(() => {
+      onChange?.(changeInfo);
+    });
   };
 
   const mergedBeforeUpload = async (file: RcFile, fileListArgs: RcFile[]) => {
@@ -155,21 +157,23 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     return parsedFile as RcFile;
   };
 
-  const onBatchStart: RcUploadProps['onBatchStart'] = batchFileInfoList => {
+  const onBatchStart: RcUploadProps['onBatchStart'] = (batchFileInfoList) => {
     // Skip file which marked as `LIST_IGNORE`, these file will not add to file list
-    const filteredFileInfoList = batchFileInfoList.filter(info => !(info.file as any)[LIST_IGNORE]);
+    const filteredFileInfoList = batchFileInfoList.filter(
+      (info) => !(info.file as any)[LIST_IGNORE],
+    );
 
     // Nothing to do since no file need upload
     if (!filteredFileInfoList.length) {
       return;
     }
 
-    const objectFileList = filteredFileInfoList.map(info => file2Obj(info.file as RcFile));
+    const objectFileList = filteredFileInfoList.map((info) => file2Obj(info.file as RcFile));
 
     // Concat new files with prev files
     let newFileList = [...mergedFileList];
 
-    objectFileList.forEach(fileObj => {
+    objectFileList.forEach((fileObj) => {
       // Replace file if exist
       newFileList = updateFileList(fileObj, newFileList);
     });
@@ -265,7 +269,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
 
   const handleRemove = (file: UploadFile) => {
     let currentFile: UploadFile;
-    Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(ret => {
+    Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then((ret) => {
       // Prevent removing file
       if (ret === false) {
         return;
@@ -275,7 +279,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
 
       if (removedFileList) {
         currentFile = { ...file, status: 'removed' };
-        mergedFileList?.forEach(item => {
+        mergedFileList?.forEach((item) => {
           const matchKey = currentFile.uid !== undefined ? 'uid' : 'name';
           if (item[matchKey] === currentFile[matchKey] && !Object.isFrozen(item)) {
             item.status = 'removed';
@@ -340,8 +344,8 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
 
   const renderUploadList = (button?: React.ReactNode, buttonVisible?: boolean) =>
     showUploadList ? (
-      <LocaleReceiver componentName="Upload" defaultLocale={defaultLocale.Upload}>
+      <LocaleReceiver componentName='Upload' defaultLocale={defaultLocale.Upload}>
-        {contextLocale => {
+        {(contextLocale) => {
           const {
             showRemoveIcon,
             showPreviewIcon,
@@ -387,7 +391,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
       prefixCls,
       {
         [`${prefixCls}-drag`]: true,
-        [`${prefixCls}-drag-uploading`]: mergedFileList.some(file => file.status === 'uploading'),
+        [`${prefixCls}-drag-uploading`]: mergedFileList.some((file) => file.status === 'uploading'),
         [`${prefixCls}-drag-hover`]: dragState === 'dragover',
         [`${prefixCls}-disabled`]: mergedDisabled,
         [`${prefixCls}-rtl`]: direction === 'rtl',