Cypress-file-upload: [Bug] Uploading a video file to a Filestack filepicker

[nerfologist]

Current behavior:

In cypress-file-upload v3 I could successfully set an mp4 video file in a Filestack filepicker reading the fixtures in base64 encoding with the following code:

const video = 'samples/sample.mp4';
cy.findByTestId('filepicker').click();

cy.fixture(video, 'base64').then(fileContent => {
  cy.get('#fsp-fileUpload').upload({
    fileContent,
    fileName: 'sample.mp4',
    mimeType: 'video/mp4',
    encoding: 'base64',
  });
  cy.findByText('Upload').click();
});

I cannot do this in v4 due to .fixture being integrated into the attachFile command. The following code is not working:

cy.get('#fsp-fileUpload').attachFile({
  filePath: video,
  mimeType: 'video/mp4',
});

Desired behavior:

I would love to have the old upload API still available for this kind of tricky situations.

Steps to reproduce: (app code and test code)

I'm working on the test repo and will submit a link ASAP!

Versions

[email protected]
Mac Os 10.13.6
Chrome 80.0.3987.149

[abramenal]

Hi, thanks for submitting the issue!

Right now I am not able to take a look into the issue properly.
In the meantime, I can suggest to check if the issue exist in v3 (previous major version):
https://github.com/abramenal/cypress-file-upload/tree/v3.5.3
Sorry about that. Not sure I can provide ETA on solving this issue in v4 since I am the only one contributor and maintainer. If you have ideas on fixing that, please feel free to open Pull Request and we can review it together.

Thanks for understanding.

[nerfologist]

Hello @abramenal and thanks for responding. No problem about the ETA, I am still using v3.5.3 and it works just fine for my use case. I just wanted to report the issue in case it affected anyone else.

In version 3.5.3 I am able to populate a Filestack filepicker, as described in the original issue, using the following code:

const video = 'samples/sample.mp4';
cy.findByTestId('filepicker').click(); // opens the Filestack modal

cy.fixture(video, 'base64').then(fileContent => {
  cy.get('#fsp-fileUpload').upload({
    fileContent,
    fileName: 'sample.mp4',
    mimeType: 'video/mp4',
    encoding: 'base64',
  });
  cy.findByText('Upload').click();
});

It is currently not working in v4 with the new attachFile function unless I did something wrong.

Unfortunately, I have limited understanding of how Cypress work so I'm not sure I could provide a worthwhile PR. But I think that providing the old upload function alongside the new attachFile in the API might be sufficient for this use case.

[jdcl32]

this can be fixed by: https://github.com/abramenal/cypress-file-upload/pull/184

[nerfologist]

This is now fixed in v4.0.6. Thanks for all your work @jdcl32 and @abramenal!

Example code (working):

cy.get('#fsp-fileUpload').attachFile({
  filePath: 'samples/smallVideo.mp4',
  fileName: 'smallVideo.mp4',
  mimeType: 'video/mp4',
  encoding: 'base64',
});