[Bug] ngx-file-drop not working with Version >= 4

[joehansen]

Current behavior:

We are using ngx-file-drop ( https://github.com/georgipeltekov/ngx-file-drop ) in our Angular App to upload files. We update our npm packages and now all our e2e cypress test with file upload don`t work anymore.

We set cypress-file-upload version from version 3.4.3 to 5.0.6 and change code specific to changes (attachFile instead of upload).

It seems that the onFileDrop from ngx-file-drop is not called anymore. When i am setting version back to 3 and change it back to uploadFile it works without problems.

Desired behavior:

It should works with Version 4 and 5

Steps to reproduce: (app code and test code)

I made a small repo where i can see the same behaviour: https://github.com/joehansen/file-drop In the app there is the component and a button who is disabled when no files avaible and gets enabled when one file is dropped. There are 2 e2e tests - one for >4 with attachFiled and one for uploadFile for Version 3 which is deactived by default

• npm install in main app and start angular app and e2e tests -> activated test for >4 is not successful
• set version in package.json in e2e folder to 3.5.3
• npm install for e2e
• activate second test and deactive first -> now it works

Versions

Cypress: 7.1.0, ngx-file-drop: 11.1.0 (also happened with 9.1.0 in our prod app) Angular: 11.2.11 (also happened with 10.1.3 in our prod app)

Thanks in advice

[abramenal]

Hi @joehansen Thanks for submitting the issue and setting up a reproducible example, appreciate that!

Please stay on v3 for now, and in the meantime I'll take care of this

[hoeni]

Same here with Angular 12 and ngx-file-drop. The onFileDrop-Event of ngx-file-drop does not arrive in my app when using cypress-file-upload.

[Blaimi]

using the Drag-n-drop component works for me as a workaround.

[Blaimi]

My investigation so far because the drag-n-drop workaround doesn't work on chrome or electron:

• chrome/electron doesn't like the dragstart-event, it is also in reallife never fired and it shouldn't in this component (dragstart is used on elements which I want to move to somewhere else). dragenter and drop is enough, even if I couldn't find any difference without dragenter.
• ngx-file-drop tries to get the files via (item as DataTransferItem).webkitGetAsEntry() if possible, otherwise, it creates a fake-file from the information it can get from the item which results in a corrupt NgxFileDropEntry because this code works only if the item is a File but not DataTransferItem
• chrome returns null if you call webkitGetAsEntry() on a custom prepared dataTransfer-object, firefox returns a FileSystemFileEntry as it should be.
• It is not possible to force ngx-file-drop to use dataTransfer.files instead of dataTransfer.items.