transloadit / uppy

The next open source file uploader for web browsers :dog:
https://uppy.io
MIT License
28.9k stars 1.98k forks source link

Angular 12 - onDragOver is not a function TypeError #3385

Closed flaxoiu closed 2 years ago

flaxoiu commented 2 years ago

Since Angular12 Migration (Version 12.2.14) I unfortunatly got this error on drag and drop a file to the upload area.

_this$opts2.onDragOver is not a function TypeError: _this$opts2.onDragOver is not a function at DragDrop.handleDragOver (http://localhost:4500/vendor.js:128478:64) at HTMLButtonElement.I (http://localhost:4500/vendor.js:222869:22)

Screenshot from libary code where the error appears: 

image

It was not appearing with Angular 11 .

The normal upload is working but not the drag and drop feature.

Tested in Chrome, Edge and Firefox

I am using the following libs: "@uppy/core": "~2.1.4", "@uppy/drag-drop": "~2.0.5", "@uppy/xhr-upload": "~2.0.5",

Any ideas?

flaxoiu commented 2 years ago

After adding the events manually to uppy it works now

cgs commented 2 years ago

I'm seeing this same error after updating to the same versions of core and drag-drop. What do you mean by adding the events manually?

flaxoiu commented 2 years ago

@cgs extend the Drag-And-Drop-Config like that:

}).use(DragDrop, {
      target : this.uploaderId,
      width  : '100%',
      height : '100%',
      onDragOver: (event) => event.clientX,
      onDragLeave: (event) => event.clientY,
      onDrop: (event) => event,
   ..............................

Adding this to the DragDrop Plugin Config fixed this issue for me but i am not sure if its a problem at all or not

onDragOver: (event) => event.clientX, onDragLeave: (event) => event.clientY, onDrop: (event) => event,

Hopefully it helps you and others. Short response would be great for all

Murderlon commented 2 years ago

@aduh95 @arturi looks like this line might not be transpiled correctly.

https://github.com/transloadit/uppy/blob/87c716a26559af3ea437c50fe09babf6557323cd/packages/%40uppy/drag-drop/src/index.js#L113

In the screenshot above the null check seems to be against the entire opts object instead of the function.

aduh95 commented 2 years ago

I think the transpilation is correct, but instead of this.opts?.onDragOver(event) we should be doing this.opts.onDragOver?.(event), probably a typo that slip through the code review in https://github.com/transloadit/uppy/pull/2449.