feat: support paste upload file

docs/demo/paste.md

@@ -0,0 +1,8 @@
+---
+title: paste
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/paste.tsx"/></code>

docs/demo/pasteDirectory.md

@@ -0,0 +1,8 @@
+---
+title: pasteDirectory
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/pasteDirectory.tsx"/></code>

docs/examples/paste.tsx

@@ -0,0 +1,43 @@
+/* eslint no-console:0 */
+import React from 'react';
+import Upload from 'rc-upload';
+
+const props = {
+  action: '/upload.do',
+  type: 'drag',
+  accept: '.png',
+  beforeUpload(file) {
+    console.log('beforeUpload', file.name);
+  },
+  onStart: file => {
+    console.log('onStart', file.name);
+  },
+  onSuccess(file) {
+    console.log('onSuccess', file);
+  },
+  onProgress(step, file) {
+    console.log('onProgress', Math.round(step.percent), file.name);
+  },
+  onError(err) {
+    console.log('onError', err);
+  },
+  style: { display: 'inline-block', width: 200, height: 200, background: '#eee' },
+};
+
+const Test = () => {
+  return (
+    <div
+      style={{
+        margin: 100,
+      }}
+    >
+      <div>
+        <Upload {...props}>
+          <a>开始上传</a>
+        </Upload>
+      </div>
+    </div>
+  );
+};
+
+export default Test;

docs/examples/pasteDirectory.tsx

@@ -0,0 +1,44 @@
+/* eslint no-console:0 */
+import React from 'react';
+import Upload from 'rc-upload';
+
+const props = {
+  action: '/upload.do',
+  type: 'drag',
+  accept: '.png',
+  directory: true,
+  beforeUpload(file) {
+    console.log('beforeUpload', file.name);
+  },
+  onStart: file => {
+    console.log('onStart', file.name);
+  },
+  onSuccess(file) {
+    console.log('onSuccess', file);
+  },
+  onProgress(step, file) {
+    console.log('onProgress', Math.round(step.percent), file.name);
+  },
+  onError(err) {
+    console.log('onError', err);
+  },
+  style: { display: 'inline-block', width: 200, height: 200, background: '#eee' },
+};
+
+const Test = () => {
+  return (
+    <div
+      style={{
+        margin: 100,
+      }}
+    >
+      <div>
+        <Upload {...props}>
+          <a>开始上传</a>
+        </Upload>
+      </div>
+    </div>
+  );
+};
+
+export default Test;

src/AjaxUploader.tsx

@@ -28,6 +28,8 @@ class AjaxUploader extends Component<UploadProps> {
 
   private fileInput: HTMLInputElement;
 
+  private isMouseEnter: boolean;
+
   private _isMounted: boolean;
 
   onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -66,41 +68,58 @@ class AjaxUploader extends Component<UploadProps> {
     }
   };
 
-  onFileDrop = async (e: React.DragEvent<HTMLDivElement>) => {
-    const { multiple } = this.props;
-
+  onFileDropOrPaste = async (e: React.DragEvent<HTMLDivElement> | ClipboardEvent) => {
     e.preventDefault();
 
     if (e.type === 'dragover') {
       return;
     }
 
-    if (this.props.directory) {
-      const files = await traverseFileTree(
-        Array.prototype.slice.call(e.dataTransfer.items),
-        (_file: RcFile) => attrAccept(_file, this.props.accept),
+    const { multiple, accept, directory } = this.props;
+    let items: DataTransferItem[] = [];
+    let files: File[] = [];
+
+    if (e.type === 'drop') {
+      const dataTransfer = (e as React.DragEvent<HTMLDivElement>).dataTransfer;
+      items = [...(dataTransfer.items || [])];
+      files = [...(dataTransfer.files || [])];
+    } else if (e.type === 'paste') {
+      const clipboardData = (e as ClipboardEvent).clipboardData;
+      items = [...(clipboardData.items || [])];
+      files = [...(clipboardData.files || [])];
+    }
+
+    if (directory) {
+      files = await traverseFileTree(Array.prototype.slice.call(items), (_file: RcFile) =>
+        attrAccept(_file, this.props.accept),
       );
       this.uploadFiles(files);
     } else {
-      let files = [...e.dataTransfer.files].filter((file: RcFile) =>
-        attrAccept(file, this.props.accept),
-      );
+      let acceptFiles = [...files].filter((file: RcFile) => attrAccept(file, accept));
 
       if (multiple === false) {
-        files = files.slice(0, 1);
+        acceptFiles = files.slice(0, 1);
       }
 
-      this.uploadFiles(files);
+      this.uploadFiles(acceptFiles);
     }
   };
 
+  onPrePaste(e: ClipboardEvent) {
+    if (this.isMouseEnter) {
+      this.onFileDropOrPaste(e);
+    }
+  }
+
   componentDidMount() {
     this._isMounted = true;
+    document.addEventListener('paste', this.onPrePaste.bind(this));
   }
 
   componentWillUnmount() {
     this._isMounted = false;
     this.abort();
+    document.removeEventListener('paste', this.onPrePaste.bind(this));
   }
 
   uploadFiles = (files: File[]) => {
@@ -261,6 +280,18 @@ class AjaxUploader extends Component<UploadProps> {
     this.fileInput = node;
   };
 
+  handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+    this.isMouseEnter = true;
+
+    this.props.onMouseEnter?.(e);
+  };
+
+  handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+    this.isMouseEnter = false;
+
+    this.props.onMouseLeave?.(e);
+  };
+
   render() {
     const {
       component: Tag,
@@ -278,8 +309,6 @@ class AjaxUploader extends Component<UploadProps> {
       children,
       directory,
       openFileDialogOnClick,
-      onMouseEnter,
-      onMouseLeave,
       hasControlInside,
       ...otherProps
     } = this.props;
@@ -297,10 +326,10 @@ class AjaxUploader extends Component<UploadProps> {
       : {
           onClick: openFileDialogOnClick ? this.onClick : () => {},
           onKeyDown: openFileDialogOnClick ? this.onKeyDown : () => {},
-          onMouseEnter,
-          onMouseLeave,
-          onDrop: this.onFileDrop,
-          onDragOver: this.onFileDrop,
+          onMouseEnter: this.handleMouseEnter,
+          onMouseLeave: this.handleMouseLeave,
+          onDrop: this.onFileDropOrPaste,
+          onDragOver: this.onFileDropOrPaste,
           tabIndex: hasControlInside ? undefined : '0',
         };
     return (