feat: Fix Firefox Drag'n'Drop Functionality (#294)

* Add isBrowserFirefox lib util

* Extract subject type logic into un-exported helper method

Author: michaeljaltamirano

lib/browser/index.js

@@ -1,2 +1,2 @@
-// eslint-disable-next-line import/prefer-default-export
 export { default as isManualEventHandling } from './isManualEventHandling';
+export { default as isBrowserFirefox } from './isBrowserFirefox';

lib/browser/isBrowserFirefox.js

@@ -0,0 +1,7 @@
+const BROWSER_FIREFOX = 'firefox';
+
+export default function isBrowserFirefox() {
+  const { name } = Cypress.browser;
+
+  return name === BROWSER_FIREFOX;
+}

src/helpers/attachFileToElement.js

@@ -1,12 +1,26 @@
 import { dispatchEvent } from '../../lib/dom';
-import { SUBJECT_TYPE, EVENTS_BY_SUBJECT_TYPE } from '../constants';
+import { EVENTS_BY_SUBJECT_TYPE, SUBJECT_TYPE } from '../constants';
+import { isBrowserFirefox } from '../../lib/browser';
 
 function dispatchEvents(element, events, dataTransfer) {
   events.forEach(event => {
     dispatchEvent(element, event, dataTransfer);
   });
 }
 
+function getEventsBySubjectType(subjectType) {
+  const events = EVENTS_BY_SUBJECT_TYPE[subjectType];
+
+  /**
+   * @see https://github.com/abramenal/cypress-file-upload/issues/293
+   */
+  if (subjectType === SUBJECT_TYPE.DRAG_N_DROP && isBrowserFirefox()) {
+    events.push('change');
+  }
+
+  return events;
+}
+
 export default function attachFileToElement(subject, { files, subjectType, force, window }) {
   const dataTransfer = new window.DataTransfer();
   files.forEach(f => dataTransfer.items.add(f));
@@ -16,7 +30,7 @@ export default function attachFileToElement(subject, { files, subjectType, force
     inputElement.files = dataTransfer.files;
 
     if (force) {
-      dispatchEvents(inputElement, EVENTS_BY_SUBJECT_TYPE[subjectType], dataTransfer);
+      dispatchEvents(inputElement, getEventsBySubjectType(subjectType), dataTransfer);
     }
   } else if (subjectType === SUBJECT_TYPE.DRAG_N_DROP) {
     const inputElements = subject[0].querySelectorAll('input[type="file"]');
@@ -30,14 +44,14 @@ export default function attachFileToElement(subject, { files, subjectType, force
       inputElement.files = dataTransfer.files;
 
       if (force) {
-        dispatchEvents(inputElement, EVENTS_BY_SUBJECT_TYPE[subjectType], dataTransfer);
+        dispatchEvents(inputElement, getEventsBySubjectType(subjectType), dataTransfer);
       }
     } else {
       const inputElement = subject[0];
       inputElement.files = dataTransfer.files;
 
       if (force) {
-        dispatchEvents(inputElement, EVENTS_BY_SUBJECT_TYPE[subjectType], dataTransfer);
+        dispatchEvents(inputElement, getEventsBySubjectType(subjectType), dataTransfer);
       }
     }
   }