Merge branch 'master' of https://github.com/Frank17008/upload

donglei · donglei · commit cb7e45dffb39 · 2025-06-23T18:06:53.000+08:00
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: ant-design # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: ant-design # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
diff --git a/README.md b/README.md
@@ -9,8 +9,8 @@ React Upload
 [![bundle size][bundlephobia-image]][bundlephobia-url]
 [![dumi][dumi-image]][dumi-url]
 
-[npm-image]: http://img.shields.io/npm/v/rc-select.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-select
+[npm-image]: http://img.shields.io/npm/v/rc-upload.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/rc-upload
 [travis-image]: https://img.shields.io/travis/react-component/upload/master?style=flat-square
 [travis-url]: https://travis-ci.com/react-component/upload
 [github-actions-image]: https://github.com/react-component/upload/workflows/CI/badge.svg
@@ -21,10 +21,10 @@ React Upload
 [david-image]: https://david-dm.org/react-component/upload/status.svg?style=flat-square
 [david-dev-url]: https://david-dm.org/react-component/upload?type=dev
 [david-dev-image]: https://david-dm.org/react-component/upload/dev-status.svg?style=flat-square
-[download-image]: https://img.shields.io/npm/dm/rc-select.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-select
-[bundlephobia-url]: https://bundlephobia.com/package/rc-select
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-select
+[download-image]: https://img.shields.io/npm/dm/rc-upload.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-upload
+[bundlephobia-url]: https://bundlephobia.com/package/rc-upload
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-upload
 [dumi-url]: https://github.com/umijs/dumi
 [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
 
@@ -84,6 +84,7 @@ React.render(<Upload />, container);
 |customRequest | function | null | provide an override for the default xhr behavior for additional customization|
 |withCredentials | boolean | false | ajax upload with cookie send |
 |openFileDialogOnClick | boolean/function():boolean | true | useful for drag only upload as it does not trigger on enter key or click event |
+|pastable | boolean | false | support paste upload |
 
 #### onError arguments
 
diff --git a/docs/demo/asyncAction.md b/docs/demo/asyncAction.md
@@ -5,4 +5,4 @@ nav:
   path: /demo
 ---
 
-<code src="../examples/asyncAction.tsx"/></code>
+<code src="../examples/asyncAction.tsx"></code>
diff --git a/docs/demo/beforeUpload.md b/docs/demo/beforeUpload.md
@@ -5,4 +5,4 @@ nav:
   path: /demo
 ---
 
-<code src="../examples/beforeUpload.tsx"/></code>
+<code src="../examples/beforeUpload.tsx"></code>
diff --git a/docs/demo/customRequest.md b/docs/demo/customRequest.md
@@ -5,4 +5,4 @@ nav:
   path: /demo
 ---
 
-<code src="../examples/customRequest.tsx"/></code>
+<code src="../examples/customRequest.tsx"></code>
diff --git a/docs/demo/directoryUpload.md b/docs/demo/directoryUpload.md
@@ -5,4 +5,4 @@ nav:
   path: /demo
 ---
 
-<code src="../examples/directoryUpload.tsx"/></code>
+<code src="../examples/directoryUpload.tsx"></code>
diff --git a/docs/demo/drag.md b/docs/demo/drag.md
@@ -5,4 +5,4 @@ nav:
   path: /demo
 ---
 
-<code src="../examples/drag.tsx"/></code>
+<code src="../examples/drag.tsx"></code>
diff --git a/docs/demo/dragDirectory.md b/docs/demo/dragDirectory.md
@@ -5,4 +5,4 @@ nav:
   path: /demo
 ---
 
-<code src="../examples/dragDirectory.tsx"/></code>
+<code src="../examples/dragDirectory.tsx"></code>
diff --git a/docs/demo/paste.md b/docs/demo/paste.md
@@ -0,0 +1,8 @@
+---
+title: paste
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/paste.tsx"></code>
diff --git a/docs/demo/pasteDirectory.md b/docs/demo/pasteDirectory.md
@@ -0,0 +1,8 @@
+---
+title: pasteDirectory
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/pasteDirectory.tsx"></code>
diff --git a/docs/demo/simple.md b/docs/demo/simple.md
@@ -5,4 +5,4 @@ nav:
   path: /demo
 ---
 
-<code src="../examples/simple.tsx"/></code>
+<code src="../examples/simple.tsx"></code>
diff --git a/docs/examples/paste.tsx b/docs/examples/paste.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',
+  pastable: 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;
diff --git a/docs/examples/pasteDirectory.tsx b/docs/examples/pasteDirectory.tsx
@@ -0,0 +1,45 @@
+/* eslint no-console:0 */
+import React from 'react';
+import Upload from 'rc-upload';
+
+const props = {
+  action: '/upload.do',
+  type: 'drag',
+  accept: '.png',
+  directory: true,
+  pastable: 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;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-upload",
-  "version": "4.8.1",
+  "version": "4.9.2",
   "description": "upload ui component for react",
   "keywords": [
     "react",
@@ -44,29 +44,29 @@
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.0",
     "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.11",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@umijs/fabric": "^4.0.1",
-    "axios": "^1.7.2",
-    "co-busboy": "^1.3.0",
+    "axios": "^1.9.0",
+    "co-busboy": "^2.0.2",
     "coveralls": "^3.0.3",
     "cross-env": "^7.0.0",
     "dumi": "^2.1.0",
     "eslint": "^8.0.0",
     "father": "^4.0.0",
     "fs-extra": "^11.2.0",
     "gh-pages": "^6.1.1",
-    "np": "^9.2.0",
+    "np": "^10.0.7",
     "raf": "^3.4.0",
     "rc-test": "^7.0.13",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "regenerator-runtime": "^0.14.1",
     "sinon": "^9.0.2",
     "typescript": "^5.3.3",
-    "vinyl-fs": "^3.0.3"
+    "vinyl-fs": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
diff --git a/src/AjaxUploader.tsx b/src/AjaxUploader.tsx
@@ -24,7 +24,7 @@ interface ParsedFileInfo {
 class AjaxUploader extends Component<UploadProps> {
   state = { uid: getUid() };
 
-  reqs: any = {};
+  reqs: Record<string, any> = {};
 
   private fileInput: HTMLInputElement;
 
@@ -66,41 +66,85 @@ class AjaxUploader extends Component<UploadProps> {
     }
   };
 
-  onFileDrop = async (e: React.DragEvent<HTMLDivElement>) => {
-    const { multiple } = this.props;
+  onDataTransferFiles = async (dataTransfer: DataTransfer, existFileCallback?: () => void) => {
+    const { multiple, accept, directory } = this.props;
 
-    e.preventDefault();
+    const items: DataTransferItem[] = [...(dataTransfer.items || [])];
+    let files: File[] = [...(dataTransfer.files || [])];
 
-    if (e.type === 'dragover') {
-      return;
+    if (files.length > 0 || items.some(item => item.kind === 'file')) {
+      existFileCallback?.();
     }
 
-    if (this.props.directory) {
-      const files = await traverseFileTree(
-        Array.prototype.slice.call(e.dataTransfer.items),
-        (_file: RcFile) => attrAccept(_file, this.props.accept),
+    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);
+    }
+  };
+
+  onFilePaste = async (e: ClipboardEvent) => {
+    const { pastable } = this.props;
+
+    if (!pastable) {
+      return;
+    }
+
+    if (e.type === 'paste') {
+      const clipboardData = (e as ClipboardEvent).clipboardData;
+      return this.onDataTransferFiles(clipboardData, () => {
+        e.preventDefault();
+      });
+    }
+  };
+
+  onFileDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+  };
+
+  onFileDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+
+    if (e.type === 'drop') {
+      const dataTransfer = (e as React.DragEvent<HTMLDivElement>).dataTransfer;
+
+      return this.onDataTransferFiles(dataTransfer);
     }
   };
 
   componentDidMount() {
     this._isMounted = true;
+
+    const { pastable } = this.props;
+
+    if (pastable) {
+      document.addEventListener('paste', this.onFilePaste);
+    }
   }
 
   componentWillUnmount() {
     this._isMounted = false;
     this.abort();
+    document.removeEventListener('paste', this.onFilePaste);
+  }
+
+  componentDidUpdate(prevProps: UploadProps) {
+    const { pastable } = this.props;
+
+    if (pastable && !prevProps.pastable) {
+      document.addEventListener('paste', this.onFilePaste);
+    } else if (!pastable && prevProps.pastable) {
+      document.removeEventListener('paste', this.onFilePaste);
+    }
   }
 
   uploadFiles = (files: File[]) => {
@@ -305,7 +349,7 @@ class AjaxUploader extends Component<UploadProps> {
           onMouseEnter,
           onMouseLeave,
           onDrop: this.onFileDrop,
-          onDragOver: this.onFileDrop,
+          onDragOver: this.onFileDragOver,
           tabIndex: hasControlInside ? undefined : '0',
         };
     return (
diff --git a/src/interface.tsx b/src/interface.tsx
@@ -44,6 +44,7 @@ export interface UploadProps
     input?: React.CSSProperties;
   };
   hasControlInside?: boolean;
+  pastable?: boolean;
 }
 
 export interface UploadProgressEvent extends Partial<ProgressEvent> {
diff --git a/tests/uploader.spec.tsx b/tests/uploader.spec.tsx
