Cypress Cloudinary file upload returns 400 - "Missing required parameter - file"

[pablohassan1]

I am testing image upload through Cloudinary iframe. Everything works as expected until the point when I submit the upload. The XHR request fails with 400 (Bad Request) status code providing error: "Missing required parameter - file". It works fine when testing manually, I compared both manual and Cypress requests and they seem identical.

Can someone suggest a solution?

describe("Upload image to Cloudinary", () => {
  const iframeUrl = "url";

  before(function () {
    cy.fixture("users").then(function (users) {
      cy.keycloakLogin(users.user1.username, users.user1.password);
    });
  });

  after(() => {
    cy.keycloakLogout();
  });

  it("should be able to upload the image through Cloudinary iframe", function () {
    // navigate to appropiate app section
    navigateToProfile();

    //open Cloudinary iframe
    cy.findByText("Upload image").click({ force: true });

    // verify the iframe has loaded
    cy.frameLoaded("iframe[data-test='uw-iframe']", {
      url: iframeUrl,
    }).as("iframe");

    // upload the image
    cy.iframe("@iframe", {
      url: iframeUrl,
    }).then((iframe) => {
      cy.wrap(iframe).find(".cloudinary_fileupload").attachFile("selfie.jpeg");

      // it works well so far, the error occurs after the below step
      cy.wrap(iframe).find("button[type='submit']").click();
    });
  });
});