feat(upload): add onDrop (#30319)

* feat(upload): Add onDrop

* Replace "if prop" logic with existential operator

* Remove redundant conditional

components/upload/Upload.tsx

@@ -34,6 +34,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     onPreview,
     onDownload,
     onChange,
+    onDrop,
     previewFile,
     disabled,
     locale: propLocale,
@@ -266,8 +267,11 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
   };
 
   const onFileDrop = (e: React.DragEvent<HTMLDivElement>) => {
-    e.stopPropagation();
     setDragState(e.type);
+
+    if (e.type === 'drop') {
+      onDrop?.(e);
+    }
   };
 
   // Test needs

components/upload/__tests__/dragger.test.js

@@ -35,4 +35,21 @@ describe('Upload.Dragger', () => {
 
     jest.useRealTimers();
   });
+
+  it('support onDrop when files are dropped onto upload area', () => {
+    const onDrop = jest.fn();
+    const wrapper = mount(
+      <Upload.Dragger onDrop={onDrop}>
+        <div />
+      </Upload.Dragger>,
+    );
+
+    wrapper.find('.ant-upload-drag-container').simulate('drop', {
+      dataTransfer: {
+        files: [new File(['foo'], 'foo.png', { type: 'image/png' })],
+      },
+    });
+
+    expect(onDrop).toHaveBeenCalled();
+  });
 });

components/upload/demo/drag.md

@@ -38,6 +38,9 @@ const props = {
       message.error(`${info.file.name} file upload failed.`);
     }
   },
+  onDrop(e) {
+    console.log('Dropped files', e.dataTransfer.files);
+  },
 };
 
 ReactDOM.render(

components/upload/index.en-US.md

@@ -43,6 +43,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 | showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` and `downloadIcon` individually | boolean \| { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
 | withCredentials | The ajax upload with cookie sent | boolean | false |  |
 | onChange | A callback function, can be executed when uploading state is changing, see [onChange](#onChange) | function | - |  |
+| onDrop | A callback function executed when files are dragged and dropped into upload area | (event: React.DragEvent) => void | - | 4.16.0 |
 | onDownload | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB | function(file): void | (Jump to new TAB) |  |
 | onPreview | A callback function, will be executed when file link or preview icon is clicked | function(file) | - |  |
 | onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is false or a Promise which resolve(false) or reject | function(file): boolean \| Promise | - |  |

components/upload/index.zh-CN.md

@@ -44,6 +44,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
 | showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
 | withCredentials | 上传请求时是否携带 cookie | boolean | false |  |
 | onChange | 上传文件改变时的状态，详见 [onChange](#onChange) | function | - |  |
+| onDrop | 当文件被拖入上传区域时执行的回调功能 | (event: React.DragEvent) => void | - | 4.16.0 |
 | onDownload | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页 | function(file): void | (跳转新标签页) |  |
 | onPreview | 点击文件链接或预览图标时的回调 | function(file) | - |  |
 | onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除               | function(file): boolean \| Promise | -   |  |

components/upload/interface.tsx

@@ -86,8 +86,12 @@ export interface UploadProps<T = any> {
   showUploadList?: boolean | ShowUploadListInterface;
   multiple?: boolean;
   accept?: string;
-  beforeUpload?: (file: RcFile, FileList: RcFile[]) => boolean | string | Promise<void | Blob | File>;
+  beforeUpload?: (
+    file: RcFile,
+    FileList: RcFile[],
+  ) => boolean | string | Promise<void | Blob | File>;
   onChange?: (info: UploadChangeParam) => void;
+  onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
   listType?: UploadListType;
   className?: string;
   onPreview?: (file: UploadFile<T>) => void;