[Bug] Upload not working on Firefox

[warpdesign]

Current behavior:

I am trying to upload a file using a React app which uses react-dropzone.

This is the cypress code:

      cy.findByText('Ajouter mon CV')
        .scrollIntoView()
        .attachFile('sample.pdf', { subjectType: 'drag-n-drop' })

On Chrome, it works as expected, but on Firefox, nothing happens. After digging into react-dropzone and cypress-file-upload the problem appears to be here:

function attachFileToElement(subject, {
...
  const dataTransfer = new window.DataTransfer();
  files.forEach(f => dataTransfer.items.add(f));

After this code, on Firefox, dataTransfer.types is empty, while on Chrome dataTransfer.types === ['Files'].

Because of this code in react-dropzone, the drag & drop fails on Firefox:

return Array.prototype.some.call(event.dataTransfer.types, function (type) { return type === 'Files' || type === 'application/x-moz-file'; });

I am not sure which one is wrong and how to fix it since the types array is supposed to be read-only.

Versions

• Cypress: 7.5.0
• cypress-file-upload: 5.0.8
• Firefox: 90

[aldipower]

Same problem here.

[warpdesign]

Same problem here.

Since I could not wait for the bug to be fixed, I did a quick ugly fix: https://github.com/warpdesign/cypress-file-upload/commits/fixed-firefox-datatransfer-type