feat: support paste upload file (#543)

* feat: support paste upload file

* feat: allowPasteUpload

* docs: update demo

* feat: rename `allowPasteUpload` to `pastable`

* test: optimize

Author: madocto

README.md

@@ -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 | 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
 

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,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;

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;

src/AjaxUploader.tsx

@@ -66,41 +66,75 @@ 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) => {
+    const { pastable } = this.props;
+
+    if (pastable) {
+      this.onFileDropOrPaste(e);
     }
   };
 
   componentDidMount() {
     this._isMounted = true;
+
+    const { pastable } = this.props;
+
+    if (pastable) {
+      document.addEventListener('paste', this.onPrePaste);
+    }
   }
 
   componentWillUnmount() {
     this._isMounted = false;
     this.abort();
+    document.removeEventListener('paste', this.onPrePaste);
+  }
+
+  componentDidUpdate(prevProps: UploadProps) {
+    const { pastable } = this.props;
+
+    if (pastable && !prevProps.pastable) {
+      document.addEventListener('paste', this.onPrePaste);
+    } else if (!pastable && prevProps.pastable) {
+      document.removeEventListener('paste', this.onPrePaste);
+    }
   }
 
   uploadFiles = (files: File[]) => {
@@ -299,8 +333,8 @@ class AjaxUploader extends Component<UploadProps> {
           onKeyDown: openFileDialogOnClick ? this.onKeyDown : () => {},
           onMouseEnter,
           onMouseLeave,
-          onDrop: this.onFileDrop,
-          onDragOver: this.onFileDrop,
+          onDrop: this.onFileDropOrPaste,
+          onDragOver: this.onFileDropOrPaste,
           tabIndex: hasControlInside ? undefined : '0',
         };
     return (

src/interface.tsx

@@ -44,6 +44,7 @@ export interface UploadProps
     input?: React.CSSProperties;
   };
   hasControlInside?: boolean;
+  pastable?: boolean;
 }
 
 export interface UploadProgressEvent extends Partial<ProgressEvent> {