Cypress-file-upload: [Bug] CSV Uploads are still not working

[janhesters]

Current behavior:

While the test won't fail for uploading the file, the file doesn't get read correctly.

Instead of the csv data, an 'object promise' is being given to the input.
Here is the tests code:

  it.only('uploads a csv file, and logs the file', () => {
    cy.visit('/');
    cy.fixture('test.csv', 'ascii').then(fileContent => {
      console.log(fileContent);
      cy.get('input#CSVReader').upload(
        {
          fileContent,
          fileName: 'test.csv',
          mimeType: 'text/comma-separated-values',
          encoding: 'ascii'
        },
        { subjectType: 'input' }
      );
    });
  });

BTW, logging out fileContent gives the correct CSV data, see first line in screenshot.

Desired behavior:

The file should get uploaded correctly and trigger the onFileUpload method with the correct data.

Steps to reproduce: (app code and test code)

My set up is still mostly equivalent to when I created this issue:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import CSVReader from 'react-csv-reader';

function App() {
  function handleFileUpload(data) {
    const [rawCSVHeader, ...csvBody] = data;
    // Line 2 and 3 in the screenshot
    console.log(csvHeader);
    console.log(csvBody);
  }

  function handleFileUpload(f) {
    console.log(f);
  }

  return (
    <CSVReader
      cssClass="csv-reader-input"
      label="Select CSV"
      onFileLoaded={handleFileUpload}
      onError={handleError}
      inputId="CSVReader"
      inputStyle={{color: 'red'}}
    />
  );
}

ReactDOM.render(<App />, document.getElementById('root'))

Versions

Cypress: 3.1.5
Mac: Mojave 10.14.3
Browser: 73.0.3683.86
cypress-file-upload: 3.0.6

[abramenal]

@janhesters
Thanks for submitting the issue!

I will take a look on the issue asap & also add an example with CSVReader component.
Will let u know.

[janhesters]

@abramenal Thank you, excellent. I was literally coding up an example to contribute to your docs, while I found this bug.

BTW, when I use the file upload outside of Cypress it works. Only when using it with Cypress and cypress-file-upload the data becomes an objectPromise instead of a valid CSV header.

[abramenal]

If you still wanna do that PR – welcome, the fix and examples can be 2 separate PRs 😈

[janhesters]

@abramenal As soon as its fixed I will make the PR 👍

[abramenal]

I am afraid file upload plugin (and Cypress itself) has nothing to do with this issue.

In a nutshell cypress-file-upload does nothing with the file content itself. Specifically for input elements, it just passes the fixture contents as files to the input (see https://github.com/abramenal/cypress-file-upload/blob/master/src/handlers/handleInput.js#L5), that's it.

It seems to me the problem is in the async parsing done within your Reader component:
https://github.com/nzambello/react-csv-reader/blob/master/src/index.js#L28
which is not being resolved yet while you're trying to log it.

What I suggest trying is to create your own component and try this way of parsing:
https://www.papaparse.com/#local-files

[janhesters]

@abramenal Thank you for the help! 🙏🏻

Hmm, but if the problem is really on the CSV reader's and not on Cypress' end, why does it work correctly if I upload a file manually outside of the tests? Should'nt Cypress be able to mimic that behaviour?

[abramenal]

Same stuff with #51

[abramenal]

@janhesters can you try out v3.0.7 I've just published? It should solve the issue.

[abramenal]

@allcontributors[bot] add @janhesters for bug

[allcontributors[bot]]

@abramenal

I've put up a pull request to add @janhesters! :tada:

[janhesters]

@abramenal Hi, it's a month later now, but I had to do a lot of work. I just tried this out again and I can verify that it works now with .csv's 👌 Thank you again for your help and this awesome package.

BTW here is the code that I used:

    cy.fixture('dummy-contacts.csv').then(fileContent => {
      cy.get('.dropzone').upload(
        {
          fileContent,
          fileName: 'test.csv',
          mimeType: 'text/comma-separated-values',
          encoding: 'utf8',
        },
        { subjectType: 'drag-n-drop' }
      );
    });

[abramenal]

@janhesters thanks for the feedback and contribution!

[rchovatiya88]

@janhesters @abramenal Thanks for all the help guys! 👏

For some reason i had to use mimeType: 'text/csv' otherwise it wouldn't work but glad it works now 😃

Thought I'd share -

```cy.fixture('sampleifile.csv').then((fileContent) => {
cy.get('[datacy="fileUpload"]').upload(
{
fileContent,
fileName: 'sampleinventory.csv',
mimeType: 'text/csv',
encoding: 'utf8',
},
{
force: true,
subjectType: 'drag-n-drop',
},
);
});