cypress-file-upload: [Bug] Upload with HTML file input does not work in Chrome 73

Current behavior:

File upload does not gets triggered when using Chrome v73 and higher. There were no info in Chrome changelog: https://developers.google.com/web/updates/2019/03/nic73

UPD: Found related Chromium bug which seems to be fixed in corresponding Chrome release: https://bugs.chromium.org/p/chromium/issues/detail?id=792336

Code snippets:

Electron 59: el.files = [testFile] trigger change on input Chrome >69: el.files = [testFile] trigger change on input Chrome 73: el.files = [testFile] not trigger change on input

This issue is fixed in #29.

Linked issue: https://github.com/cypress-io/cypress/issues/3730

Desired behavior:

File upload should work seamlessly on any platform.

Versions

Chrome: >73

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 17 (10 by maintainers)

Most upvoted comments

@ChrisSargent @rchovatiya88 thanks for the feedback! Will release this change today.

@rchovatiya88

As a first step I would suggest providing force parameter to manually trigger the change event. See https://github.com/abramenal/cypress-file-upload#api

If that works for you, likely this is a bug connected to our environment auto-detection. If so, please bring more details on your setup (node / browser / os versions, dockerfile, etc., anything that may be useful for investigation).

If that still doesn’t work for you – then it is either a problem with the package usage in your code, or weird fixture that you’re trying to upload.

Looking forward your reply!

Thanks for the quick update and adding me as a contributor!

@abramenal @ChrisSargent
i’ve updated to 3.0.5 but was still facing issue. 😞 This is my workaround which worked for me. 😄

/upload.spec.js - Test File

it('Upload docs', () => {
    cy.upload_file('license.jpg', 'image/jpg', '.front-image > .image-upload > input');
  });

/command.js -

Cypress.Commands.add('upload_file', (fileName, type, selector) => {
  cy.get(selector).then((subject) => {
    cy.fixture(fileName, 'base64').then((content) => {
      const el = subject[0];
      const blob = b64toBlob(content, type);
      cy.window().then((win) => {
        const testFile = new win.File([blob], fileName, { type });
        const dataTransfer = new DataTransfer();

        dataTransfer.items.add(testFile);
        el.files = dataTransfer.files;
      });
    });
  });

  cy.get(selector).trigger('change', { force: true });
});

function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, { type: contentType });
  blob.lastModifiedDate = new Date();
  return blob;
}