fix: Upload drag & drop not working (#625)

* fix: drop logic

* fix: preventDefault logic

Author: zombieJ

src/AjaxUploader.tsx

@@ -66,27 +66,14 @@ class AjaxUploader extends Component<UploadProps> {
     }
   };
 
-  onFileDropOrPaste = async (e: React.DragEvent<HTMLDivElement> | ClipboardEvent) => {
-    if (e.type === 'dragover') {
-      return;
-    }
-
+  onDataTransferFiles = async (dataTransfer: DataTransfer, existFileCallback?: () => void) => {
     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 || [])];
-    }
+    const items: DataTransferItem[] = [...(dataTransfer.items || [])];
+    let files: File[] = [...(dataTransfer.files || [])];
 
     if (files.length > 0 || items.some(item => item.kind === 'file')) {
-      e.preventDefault();
+      existFileCallback?.();
     }
 
     if (directory) {
@@ -105,11 +92,32 @@ class AjaxUploader extends Component<UploadProps> {
     }
   };
 
-  onPrePaste = (e: ClipboardEvent) => {
+  onFilePaste = async (e: ClipboardEvent) => {
     const { pastable } = this.props;
 
-    if (pastable) {
-      this.onFileDropOrPaste(e);
+    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);
     }
   };
 
@@ -119,23 +127,23 @@ class AjaxUploader extends Component<UploadProps> {
     const { pastable } = this.props;
 
     if (pastable) {
-      document.addEventListener('paste', this.onPrePaste);
+      document.addEventListener('paste', this.onFilePaste);
     }
   }
 
   componentWillUnmount() {
     this._isMounted = false;
     this.abort();
-    document.removeEventListener('paste', this.onPrePaste);
+    document.removeEventListener('paste', this.onFilePaste);
   }
 
   componentDidUpdate(prevProps: UploadProps) {
     const { pastable } = this.props;
 
     if (pastable && !prevProps.pastable) {
-      document.addEventListener('paste', this.onPrePaste);
+      document.addEventListener('paste', this.onFilePaste);
     } else if (!pastable && prevProps.pastable) {
-      document.removeEventListener('paste', this.onPrePaste);
+      document.removeEventListener('paste', this.onFilePaste);
     }
   }
 
@@ -335,8 +343,8 @@ class AjaxUploader extends Component<UploadProps> {
           onKeyDown: openFileDialogOnClick ? this.onKeyDown : () => {},
           onMouseEnter,
           onMouseLeave,
-          onDrop: this.onFileDropOrPaste,
-          onDragOver: this.onFileDropOrPaste,
+          onDrop: this.onFileDrop,
+          onDragOver: this.onFileDragOver,
           tabIndex: hasControlInside ? undefined : '0',
         };
     return (

tests/uploader.spec.tsx

@@ -735,6 +735,12 @@ describe('uploader', () => {
           },
         ],
       };
+
+      const preventDefaultSpy = jest.spyOn(Event.prototype, 'preventDefault');
+
+      fireEvent.dragOver(input);
+      expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+
       fireEvent.drop(input, { dataTransfer: { items: [makeDataTransferItemAsync(files)] } });
       const mockStart = jest.fn();
       handlers.onStart = mockStart;
@@ -743,6 +749,8 @@ describe('uploader', () => {
         expect(mockStart.mock.calls.length).toBe(1);
         done();
       }, 1000);
+
+      preventDefaultSpy.mockRestore();
     });
 
     it('unaccepted type files to upload will not trigger onStart when select directory', done => {