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

joehansen commented 3 years ago

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

version3 version5

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

Blaimi commented 3 years ago

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.

abramenal / cypress-file-upload