Cypress-file-upload: [Bug] Adding multiple files adds them more than once

[qstiegler]

Current behavior:

I have a method which tests the multi file upload of our Angular application. With the package version 3.5.3 it worked perfectly. Now when I updated to 4.0.7, I got the following issue:

1. Select the first file pdf-sample-one.pdf:
   
   
   
   • pdf-sample-one.pdf file got attached
   
   
   • The result is one file (pdf-sample-one.pdf) ready for upload
   
   
2. Select the first file pdf-sample-two.pdf:
   
   
   
   • pdf-sample-two.pdf got attached AND pdf-sample-one.pdf got attached again
   
   
   • The result is three files (pdf-sample-one.pdf, pdf-sample-two.pdf and pdf-sample-one.pdf) but the expected result should be two files (pdf-sample-one.pdf, pdf-sample-two.pdf)
   
   
3. Select the third file pdf-sample-three.pdf:
   
   
   
   • pdf-sample-three.pdf got attached AND pdf-sample-two.pdf and pdf-sample-three.pdf got attached again
   
   
   • The result is three files (pdf-sample-one.pdf, pdf-sample-two.pdf, pdf-sample-one.pdf, pdf-sample-three.pdf, pdf-sample-two.pdf and pdf-sample-one.pdf) but the expected result should be two files (pdf-sample-one.pdf, pdf-sample-two.pdf, pdf-sample-three.pdf)
   
   

Here is my code:

cy.fixture('pdf-sample.pdf', 'base64')
  .as('file');

cy.get('[data-cy=file-upload-input]')
  .as('uploadInput');

cy.get('@file').then(fileContent => {
  cy.get('@uploadInput').attachFile({
    fileContent,
    fileName: 'pdf-sample-one.pdf',
    mimeType: 'application/pdf',
    encoding: 'base64'
  });

  cy.get('[data-cy-multi=selected-file]')
    .should('have.length', 1);

  cy.get('@uploadInput').attachFile({
    fileContent,
    fileName: 'pdf-sample-two.pdf',
    mimeType: 'application/pdf',
    encoding: 'base64'
  });

  cy.get('[data-cy-multi=selected-file]')
    .should('have.length', 2);

  cy.get('@uploadInput').attachFile({
    fileContent,
    fileName: 'pdf-sample-three.pdf',
    mimeType: 'application/pdf',
    encoding: 'base64'
  });

  cy.get('[data-cy-multi=selected-file]')
    .should('have.length', 3);
});

Versions

Cypress: 4.8.0
cypress-file-upload: 4.0.7
Operating System: macOS 10.15.04
Browser: Chrome 83

[CarlosAmaral]

I have the same issue. Any workaround for this?

[qstiegler]

I have the same issue. Any workaround for this?

I used the old version of the package instead as workaround.

[endymonium]

Same issue with the most recent versions, I used https://github.com/cypress-io/cypress/issues/170#issuecomment-609395903 as a workaround.

[IMightGitIt]

ooooh, this was a bug in the library? I have been yelling at FE devs to fix our upload function. 😊
My workaround, for now, is to reload the entire window after each upload.
It's not really pretty but, it does mean I don't have to mess around with old versions.
Once this is fixed I just remove the cy.reload() and everything should run faster again.

[Stex]

Same behaviour here. I reverted to 3.5.3 now until this is fixed.

I hope it stays compatible with the newest cypress version as long as possible.

[DariaZelenkevich]

I'm not sure if it can be called a workaround but I've added to the Cypress command.js command based on this package source code:

Cypress.Commands.add('addFile', (selector, ...fileNamePath) => {

const dataTransfer = new DataTransfer();

fileNamePath.forEach(file => {

    cy.fixture(file, 'base64')
    .then(fileData => {
        let blob = Cypress.Blob.base64StringToBlob(fileData);
        let fileName = file.split('/');
        const testFile = new File([blob], fileName[fileName.length-1], {
            type: 'image/jpeg'
        })

        dataTransfer.items.add(testFile); 
    })
})

cy.get(selector).then(subject => {

    subject[0].files = dataTransfer.files;

    const eventPayload = {
        bubbles: true,
        cancelable: true,
        detail: dataTransfer,
        force: true
    }

    const event = new CustomEvent(['change'], eventPayload);
    Object.assign(event, { dataTransfer });

    subject[0].dispatchEvent(event);
})

})

Cypress: 5.0.0

[probil]

@DariaZelenkevich , thanks for this snippet. With few adjustments I've managed to make it work for my project. I don't need cypress-file-upload anymore

[DariaZelenkevich]

@probil , you are welcome. Use it for good)

[anonkey]

this seems to fix it https://github.com/abramenal/cypress-file-upload/pull/243