Cypress.io testing multiple file drag and drop uploads

cypress-drag-and-drop-test.js

// drag and drop multiple files
Cypress.Commands.add("upload_files", (selector, fileUrlArray, type = "") => {
  const files = [];
  fileUrlArray.forEach((fileUrl) => {
    cy.fixture(fileUrl, "base64")
      .then(Cypress.Blob.base64StringToBlob)
      .then((blob) => {
        const nameSegments = fileUrl.split("/");
        const name = nameSegments[nameSegments.length - 1];
        files.push(new File([blob], name, { type }));
      });
  });
  const event = { dataTransfer: { files: files } };
  return cy.get(selector).trigger("drop", event);
});

// example test - files should be in the 'fixtures/' dir
describe("test drag and drop upload", () => {
  it("test upload of 2 files", () => {
    // drag and drop
    cy.upload_files(".drop", ["myfile1.csv", "myfile2.csv"]);
    
    // check for response
    cy.get(".output").should("contain", "some text");
  });
});

This solution gave me the error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. Is this something you are also seeing?

This solution gave me the error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. Is this something you are also seeing?

Though it was working many years ago, it's very possible or likely it's not compatible with more recent versions of Cypress. I haven't checked or looked at it since then.