File upload on input, stop working in Chrome 73

[DragorWW]

Code:

// fixture test_file.png exist
// test.spec.js
cy.uploadFile('input[type="file"]', "test_file.png", 'image/png');

// command.js
Cypress.Commands.add("uploadFile", (selector, fileUrl, type = "") => {
  return cy.get(selector).then(subject => {
    return cy
      .fixture(fileUrl, "base64")
      .then(Cypress.Blob.base64StringToBlob)
      .then(blob => {
        return cy.window().then(win => {
          const el = subject[0];
          const nameSegments = fileUrl.split("/");
          const name = nameSegments[nameSegments.length - 1];
          const testFile = new win.File([blob], name, { type });
          const dataTransfer = new DataTransfer();
          dataTransfer.items.add(testFile);
          el.files = dataTransfer.files;
          return subject;
        });
      });
  });
});

in 3.1.5, this code work, after update to 3.2.0 stop working.

          dataTransfer.items.add(testFile);
          el.files = dataTransfer.files;
// this code not trigger change
// but set files

also cypress-file-upload not working in 3.2.0 (working only drag mode)

solution from #170 (comment) not working

[DragorWW]

If add cy.wrap(subject).trigger('change'); after el.files = dataTransfer.files;, event change fire on input

Cypress.Commands.add("uploadFile", (selector, fileUrl, type = "") => {
  return cy.get(selector).then(subject => {
    return cy
      .fixture(fileUrl, "base64")
      .then(Cypress.Blob.base64StringToBlob)
      .then(blob => {
        return cy.window().then(win => {
          const el = subject[0];
          const nameSegments = fileUrl.split("/");
          const name = nameSegments[nameSegments.length - 1];
          const testFile = new win.File([blob], name, { type });
          const dataTransfer = new DataTransfer();
          dataTransfer.items.add(testFile);
          el.files = dataTransfer.files;
          return cy.wrap(subject).trigger('change');
        });
      });
  });
});

[jennifer-shehane]

Gosh, yeah, I can't think of what could have affected this from the 3.2.0 update. But, also, I'm not able to see any difference in how this test runs in 3.2.0 versus 3.1.5. Can you write an assertion that fails in 3.2.0 that passes in 3.1.5 so that I can see the exact change?

[DragorWW]

Gosh, yeah, I can't think of what could have affected this from the 3.2.0 update. But, also, I'm not able to see any difference in how this test runs in 3.2.0 versus 3.1.5. Can you write an assertion that fails in 3.2.0 that passes in 3.1.5 so that I can see the exact change?

Thanks for the quick reaction, today I will prepare examples for reproduction

[DragorWW]

@jennifer-shehane Start explore more in detail of the problem. Сypress update is not related to the problem.

The problem was caused by different versions of chromium.

Electron 59: el.files = dataTransfer.files; trigger change on input
Chrome 69 : el.files = dataTransfer.files; trigger change on input
Chrome 73: el.files = dataTransfer.files; not trigger change on input

I apologize for not fully understanding it before creating issue.

[pszalanski]

Yes, I can confirm that the problem does not exist with Chrome 72, but came up after the update to Chrome 73.

Your workaround works for me, as well.

I could not find anything on google, regarding a bug in Chrome.

[giovannyquin]

@DragorWW I think you can close the issue

[pszalanski]

@giovannyquin why? This workaround leads to the event being fired twice for chrome < 73 and Electron.

[DragorWW]

@giovannyquin @pszalanski Yes, there is no problem in cypress, but the problem with this behavior did not come from this, perhaps you should find the reason for its appearance and add a link to the documentation

[pszalanski]

You are right. This is probably some Chrome 73 bug or change. I'll post here if I find anything useful.