[Bug] Drag and drop not working as expected

pvogel2 commented 3 years ago

Current behavior:

I am not sure if this is a bug: When I run cypress test with drag and drop variant nothing is uploaded. As far as I can see the problem is that in the dataTransfer object the'types' array is empty. My drag and drop implementation checks this property for including 'Files' type to allow uploads from drag and drop.

In general I think to simulate native behaviour the types proeprty should be set correctly.

Test code (partial): cy.get(mediaCenter.upload.dropzone).attachFile('media.jpg', { subjectType: 'drag-n-drop' });

drop callback:

...
    drop(event) {
      const data = event.dataTransfer;
      // only accept file drag&drop. e.g. files from desktop
      if (data.types.indexOf('Files') === -1) {
        return;
      }
      this.$store.commit('upload/addMediaItemsFromFiles', data.files);
    },
...

This is just the dataTransfer object picked from ff console:

DataTransfer
  dropEffect: "none"
  effectAllowed: "none"
  files: FileList [ File ]
  items: DataTransferItemList { 0: DataTransferItem, length: 1 }
  mozCursor: "auto"
  mozSourceNode: null
  mozUserCancelled: false
  types: Array []

Desired behavior:

The types array should include at least 'Files' when files are uploaded.

Steps to reproduce: (app code and test code)

Just check the dataTransfer object by setting a breakpoint.

Versions

Cypress: 6.5 Browser: Firefox OS: ubuntu linux

michaeljaltamirano commented 3 years ago

When I undo my change in #290 I am indeed able to get the behavior working in Firefox, but types still shows up as an empty array:

DataTransfer {
  dropEffect: "none"
  effectAllowed: "none"
  files: FileList [ File ]
  items: DataTransferItemList { 0: DataTransferItem, length: 1 }
  mozCursor: "auto"
  mozSourceNode: null
  mozUserCancelled: false
  types: Array []
}

It seems like there's different behavior in Chrome and Firefox, for which there's already precedent in the codebase: https://github.com/abramenal/cypress-file-upload/blob/1ae2d71821780c2f5f720c2e3a6be0593fa70825/lib/browser/isManualEventHandling.js

I wonder if an appropriate fix is to add some conditional logic that checks for dataTransfer.types.length === 0 and sets the 'change' event back for drag'n'drop? Something like the following:

https://github.com/abramenal/cypress-file-upload/blob/1ae2d71821780c2f5f720c2e3a6be0593fa70825/src/helpers/attachFileToElement.js#L28-L42

if (force) {
+  const events = EVENTS_BY_SUBJECT_TYPE[subjectType];
+  
+  // Firefox compatibility fix. See https://github.com/abramenal/cypress-file-upload/issues/293
+  if (dataTransfer.types.length === 0) {
+    events.push('change');
+  } 
+
+  dispatchEvents(inputElement, events, dataTransfer);
-  dispatchEvents(inputElement, EVENTS_BY_SUBJECT_TYPE[subjectType], dataTransfer);
}

Just spit-balling since I introduced the issue 😅 The above changes did fix the Firefox issue, though.

abramenal commented 3 years ago

Hi @pvogel2 Thanks for submitting the issue!

No worries @michaeljaltamirano, thanks for investigating it further. Something like this indeed should work – I would only opt for checking browser since this is browser-specific thing. This can be done by having a new /lib/browser util. Will you be able to create a PR for that change?

tmjoen commented 3 years ago

Drag and drop uploading broke between 5.0.4 and 5.0.5 for me -- cypress 6.9.1 running on Chrome. Is this the same issue you think, or a different one?

michaeljaltamirano commented 3 years ago

Drag and drop uploading broke between 5.0.4 and 5.0.5 for me -- cypress 6.9.1 running on Chrome. Is this the same issue you think, or a different one?

@tmjoen Can you share more details? Many chrome users were seeing duplication with 5.0.5 (https://github.com/abramenal/cypress-file-upload/issues/276). Are you seeing no uploads at all (like this issue)?

tmjoen commented 3 years ago

Drag and drop uploading broke between 5.0.4 and 5.0.5 for me -- cypress 6.9.1 running on Chrome. Is this the same issue you think, or a different one?

@tmjoen Can you share more details? Many chrome users were seeing duplication with 5.0.5 (#276). Are you seeing no uploads at all (like this issue)?

Yes, there are no updates when drag-n-drop'ing to my upload component

      cy.get('#employee_avatar_').attachFile(
        'avatar.jpg',
        { subjectType: 'drag-n-drop' }
      )

The same code works in 5.0.4.

I'm afraid I'm not sure how to debug further :(

abramenal commented 3 years ago

v5.0.6 is released containing the fix from @michaeljaltamirano We have also enabled Firefox tests on CI, so I expect such things don't break easily now.

tmjoen commented 3 years ago

The problem persists on 5.0.6 for me with Chrome, so it is maybe not related to this?

abramenal commented 3 years ago

Hey @tmjoen I believe these issues might be unrelated, can you please open a separate issue describing your setup, versions, which drag-n-drop implementation you are using, and maybe a HTML sample of that employee_avatar_ element?

abramenal / cypress-file-upload