Fix/multiple concurrent file uploads

README.md

@@ -35,6 +35,7 @@ import 'cypress-file-upload';
 ```
 
 Note: With Typescript, ensure the following is in your `cypress\tsconfig.json` file:
+
 ```
 "compilerOptions": {
   "types": ["cypress", "cypress-file-upload"]
@@ -59,6 +60,11 @@ cy.get('[data-cy="file-input"]')
   .attachFile(yourFixturePath)
   .attachFile(yourBestPicture);
 
+/* You can also attach multiple files concurrently to avoid triggering multiple events */
+
+const yourBestPicture = 'meow.png';
+cy.get('[data-cy="file-input"]').attachFile([yourFixturePath, yourBestPicture]);
+
 /* If your file encoding is not supported out of the box, make sure to pass it explicitly */
 
 const weirdo = 'test.shp';
@@ -78,18 +84,23 @@ cy.get('[data-cy="file-input"]').attachFile({ filePath: data, fileName: 'users.j
 const special = 'file.spss';
 cy.fixture(special, 'binary')
   .then(Cypress.Blob.binaryStringToBlob)
-  .then((fileContent) => {
+  .then(fileContent => {
     cy.get('[data-cy="file-input"]').attachFile({ fileContent, filePath: special, encoding: 'utf-8' });
-})
+  });
 
 /* when providing fileContent is possible to ignore filePath but fileName and mime type must be provided */
 
 const special = 'file.spss';
 cy.fixture(special, 'binary')
   .then(Cypress.Blob.binaryStringToBlob)
-  .then((fileContent) => {
-    cy.get('[data-cy="file-input"]').attachFile({ fileContent, fileName: 'special', mimeType: 'application/octet-stream', encoding: 'utf-8' });
-})
+  .then(fileContent => {
+    cy.get('[data-cy="file-input"]').attachFile({
+      fileContent,
+      fileName: 'special',
+      mimeType: 'application/octet-stream',
+      encoding: 'utf-8',
+    });
+  });
 ```
 
 **Trying to upload a file that does not supported by Cypress by default?** Make sure you pass `encoding` property (see [API](#api)).
@@ -222,6 +233,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/all-contri
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

lib/dom/dispatchEvent.js

@@ -0,0 +1,23 @@
+/**
+ * @description dispatches custom event with dataTransfer object provided
+ *
+ * @param {HTMLElement} target
+ * @param {string} event
+ * @param {DataTransfer} dataTransfer
+ */
+export default function dispatchEvent(target, event, dataTransfer) {
+  const eventPayload = {
+    bubbles: true,
+    cancelable: true,
+    detail: dataTransfer,
+  };
+
+  try {
+    const e = new CustomEvent(event, eventPayload);
+    Object.assign(e, { dataTransfer });
+
+    target.dispatchEvent(e);
+  } catch (e) {
+    // make sure event triggering won't break if subject element is not visible or in DOM anymore
+  }
+}

lib/dom/index.js

@@ -1,2 +1,3 @@
+export { default as dispatchEvent } from './dispatchEvent';
 export { default as isElementVisible } from './isElementVisible';
 export { default as isShadowElement } from './isShadowElement';

lib/file/index.js

@@ -2,3 +2,4 @@ export { default as getFileBlobAsync } from './getFileBlobAsync';
 export { default as getFileEncoding } from './getFileEncoding';
 export { default as getFileMimeType } from './getFileMimeType';
 export { default as getFileContent } from './getFileContent';
+export { default as resolveFile } from './resolveFile';

lib/file/resolveFile.js

@@ -0,0 +1,29 @@
+import getFileContent from './getFileContent';
+import getFileMimeType from './getFileMimeType';
+import getFileEncoding from './getFileEncoding';
+import getFileBlobAsync from './getFileBlobAsync';
+
+export default function resolveFile(fixture, window) {
+  const { filePath, encoding, mimeType, fileName } = fixture;
+
+  const fileMimeType = mimeType || getFileMimeType(filePath);
+  const fileEncoding = encoding || getFileEncoding(filePath);
+
+  return new Cypress.Promise(resolve =>
+    getFileContent({
+      filePath,
+      fileContent: fixture.fileContent,
+      fileEncoding,
+    })
+      .then(fileContent =>
+        getFileBlobAsync({
+          fileContent,
+          fileName,
+          mimeType: fileMimeType,
+          encoding: fileEncoding,
+          window,
+        }),
+      )
+      .then(resolve),
+  );
+}