feat: allowPasteUpload

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 |
+|allowPasteUpload | boolean | false | support paste upload |
 
 #### onError arguments
 

src/AjaxUploader.tsx

@@ -28,8 +28,6 @@ class AjaxUploader extends Component<UploadProps> {
 
   private fileInput: HTMLInputElement;
 
-  private isMouseEnter: boolean;
-
   private _isMounted: boolean;
 
   onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -106,14 +104,21 @@ class AjaxUploader extends Component<UploadProps> {
   };
 
   onPrePaste(e: ClipboardEvent) {
-    if (this.isMouseEnter) {
+    const { allowPasteUpload } = this.props;
+
+    if (allowPasteUpload) {
       this.onFileDropOrPaste(e);
     }
   }
 
   componentDidMount() {
     this._isMounted = true;
-    document.addEventListener('paste', this.onPrePaste.bind(this));
+
+    const { allowPasteUpload } = this.props;
+
+    if (allowPasteUpload) {
+      document.addEventListener('paste', this.onPrePaste.bind(this));
+    }
   }
 
   componentWillUnmount() {
@@ -280,18 +285,6 @@ 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,
@@ -309,6 +302,8 @@ class AjaxUploader extends Component<UploadProps> {
       children,
       directory,
       openFileDialogOnClick,
+      onMouseEnter,
+      onMouseLeave,
       hasControlInside,
       ...otherProps
     } = this.props;
@@ -326,8 +321,8 @@ class AjaxUploader extends Component<UploadProps> {
       : {
           onClick: openFileDialogOnClick ? this.onClick : () => {},
           onKeyDown: openFileDialogOnClick ? this.onKeyDown : () => {},
-          onMouseEnter: this.handleMouseEnter,
-          onMouseLeave: this.handleMouseLeave,
+          onMouseEnter,
+          onMouseLeave,
           onDrop: this.onFileDropOrPaste,
           onDragOver: this.onFileDropOrPaste,
           tabIndex: hasControlInside ? undefined : '0',

src/interface.tsx

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

tests/uploader.spec.tsx

@@ -350,8 +350,8 @@ describe('uploader', () => {
     });
 
     it('paste to upload', done => {
-      const rcUpload = uploader.container.querySelector('.rc-upload')!;
-      const input = uploader.container.querySelector('input')!;
+      const { container } = render(<Upload {...props} allowPasteUpload />);
+      const input = container.querySelector('input')!;
 
       const files = [
         {
@@ -373,7 +373,6 @@ describe('uploader', () => {
         done(err);
       };
 
-      fireEvent.mouseEnter(rcUpload);
       fireEvent.paste(input, {
         clipboardData: { files },
       });
@@ -407,8 +406,7 @@ describe('uploader', () => {
     });
 
     it('paste files with multiple false', done => {
-      const { container } = render(<Upload {...props} multiple={false} />);
-      const rcUpload = container.querySelector('.rc-upload')!;
+      const { container } = render(<Upload {...props} multiple={false} allowPasteUpload />);
       const input = container.querySelector('input')!;
       const files = [
         new File([''], 'success.png', { type: 'image/png' }),
@@ -441,7 +439,6 @@ describe('uploader', () => {
         value: files,
       });
 
-      fireEvent.mouseEnter(rcUpload);
       fireEvent.paste(input, { clipboardData: { files } });
 
       setTimeout(() => {
@@ -783,7 +780,8 @@ describe('uploader', () => {
     });
 
     it('paste directory', done => {
-      const rcUpload = uploader.container.querySelector('.rc-upload')!;
+      const { container } = render(<Upload {...props} allowPasteUpload />);
+      const rcUpload = container.querySelector('.rc-upload')!;
       const files = {
         name: 'foo',
         children: [