Cypress-file-upload: Allow uploading of multiple files outside of chaining `attachFile`

[HartiganHM]

Current behavior:

Users are able to upload multiple files by chaining attachFile methods.

Example from docs

cy.get('[data-cy="file-input"]')
  .attachFile(yourFixturePath)
  .attachFile(yourBestPicture);

Desired behavior:

The above behavior assumes a static number of known files and removes flexibility from previous versions of passing an array of files. It would be nice to have this feature re-implemented in some way.

Example with old implementation (trimmed down for brevity)

// uploadMultipleFiles.js

const PDF_FILE = 'Test.pdf';
const DOCX_FILE = 'Test.docx';
const DROPZONE_ELEMENT = '.very-specific-class-name';

Cypress.Commands.add('uploadMultipleFiles', ({ count = 2, type = 'docx' }) => {
  const files = [];

  const fileTypes = { docx: DOCX_FILE, pdf: PDF_FILE };

  for (let index = 0; index < count; index++) {
    if (index % 2 === 0) {
      files.push(fileTypes[type] || fileTypes.docx);
    } else {
      files.push(fileTypes[type] || fileTypes.pdf);
    }
  }

  cy.get(DROPZONE_ELEMENT).attachFile(files, processingOptions);
};

// test.spec.js

describe('A good test', () => {
  it('Should upload 3 files', () => {
    cy.uploadMultipleFiles({ count: 3 });
  };

  it('Should upload 10 DOCX files', () => {
    cy.uploadMultipleFiles({ count: 10, type: 'docx' });
  };
});

Versions

OS: macOS Mojave 10.14.6
Browser: Chrome 81.0.4044.138
cypress: ^4.5.0
cypress-file-upload: ^4.0.6

[IMightGitIt]

I highly second this.
I have to use multi-upload quite a few times in my testing, and with a various number of files.
Being able to feed an array of files to a central function and have it upload would help me a lot.

[travis-flint]

This used to work in v 3.4, with cypress 4.3.0, but we updated to cypress 5.0 and the latest version of this library and it no longer works. Some of our tests need to upload more than 1 file all at once. So chaining the call is not a viable option.

[Hypercubed]

I'd be happy to submit a PR for this... but first need to decide on a the API.

Option 1:
Add multiple file support to attachFile:

cy.get(selector).attachFile([file1, file2, file3]);

Option 2:
Add a new command to add mutiple files:

cy.get(selector).attachMultipleFiles([file1, file2, file3]);

Option 3: (what I would really like)
Seperate attaching a file and "uploading" (triggering the events):

cy.get(selector).attachFile(file1);
cy.get(selector).attachFile(file2).attachFile(file3);
cy.get(selector).upload();

[abramenal]

Hi @Hypercubed

Option 1 was used in v3 releases – from my perspective this is better from user experience (single command that accepts anything). You can check v3 docs: https://github.com/abramenal/cypress-file-upload/tree/v3.5.3

Option 2 seems to be a bit easier to support comparing to Option 1, but still fine

Option 3 provides a bit more granular control on what's happening, but requires to have internal command state.
I'm a bit concerned about that since usually Cypress command is pure.
More than that, you need to distinguish files attached to different subject, which can become messy.

Although Option 3 is more flexible, I'd prefer to go with either 1 or 2 just because it seems way easier to support & avoid future bug tickets.

Anyways I'm open to discuss Option 3 benefits more specifically and happy to help you with anything you need to develop any solution. Please let me know if you need anything.

[Hypercubed]

Yeah... I think option 1 is easist and can be done as a non-breaking change.

Regarding option 3. My understanding (please correct me if I'm wrong) is that currently attachFile does two things: 1) Adds the file to the file intput element and 2) triggers the events. My idea was to seperate these to actions. attachFile would add the file to the element and upload would trigger the event. So the state is only on the element. I thought this might address #204 as well.

P.S. My first attempt to hack around this was to pass force: false to all attachFile calls expect the last... but that gets overwritten by force || getForceValue(subject)

[abramenal]

Got your idea 👍
I'm thinking if having 2 different commands still can be frustrating. User can assume attachFile can be called independently. We can say that events can be omitted, but when doing e2e we want to simulate real user's behavior as close as possible. This means attachFile now should always be followed by upload which means they are still indivisible.

[Hypercubed]

:+1: I have option 1 working and tests added to recipies/angularjs-ng-file-upload, PR coming.

With option 1 not sure what to do about #204.