bug: not validate csv file

[Pardeep94]

Csv reader accept every type of file. but i need to restrict it to read only csv type file

[fabianurrutiao]

the csv reader only allow csv type files, how are you using the react-csv-reader?.

this is one example with only csv files allow:

import CSVReader from "react-csv-reader";

    <CSVReader
      cssClass="react-csv-input"
      label="Select CSV with secret Death Star statistics"
      onFileLoaded={handleForce}
    />

[Pardeep94]

I am also doing the same but it accept every type of file.

<CSVReader cssClass="react-csv-input" onFileLoaded={this.handleImport} />

[fabianurrutiao]

I am also doing the same but it accept every type of file.

Can you show your code pleased. you install this for npm?

[Pardeep94]

This array i received when i upload jpg file.

yes i was install it through npm

[Pardeep94]

` import CSVReader from 'react-csv-reader';

<CSVReader
          cssClass="react-csv-input"
          onFileLoaded={this.handleImport}
        />

handleImport(data) { const headerList = []; const colorList = [];

for (const index in data[0]) {
  headerList.push({
    name: data[0][index],
    tag: ''
  });
}

} `

I just need header of csv file thats why i used data[0]

[fabianurrutiao]

ok, can you search on node_modules, react-csv-reader -> dist -> react-csv-reader.js and confirm that when you search for accept this only say:

accept:"text/csv",

if not, go to https://github.com/nzambello/react-csv-reader/blob/master/dist/react-csv-reader.js and change this code for the code inside the dist.

[Pardeep94]

I just check node_modules. but it is correct. this check is already exist in node_module

[fabianurrutiao]

I just check node_modules. but it is correct. this check is already exist in node_module

The problem is that the file declaration to be accepted by the csv reader is currently in that file, try making an update and changing that file for the current one that you have in your project. If that does not work, try to put a normal input file,

<input type="file" accept=".csv" />

If even in this input it lets you enter files besides csv, the problem is not the csvreader, and you have a complement or some directive that makes a correction in the input.

[Pardeep94]

Now i understand the issue. only this "accept " validation is not enough because when we are going to upload file then we have a option to change file type in select file popup of computer and after that we can upload any type of file.

To avoid this type of issue we need to manually check the file extension when file is received after upload and if it is not csv than that file will not accepted by CSVReader.

[fabianurrutiao]

Excellent. So what you have to do now is to verify or the extension of the file, or depending on what you want to use the file, verify the integrity of it, whether it is the number of columns etc. For example, I verify the number of columns, since mainly I use it to make an import to the database. regards

[darkwebdev]

The problem with input type="file" is that different browsers show the dialog box differently. Chrome treats both accept="text/csv" and accept=".csv" correctly, but Firefox only understands accept=".csv".

Update: MacOS, Firefox 65, Chrome 70

[Pardeep94]

I am using this extension on Chrome but my operating system is ubuntu and on ubuntu accept="text/csv" is not working. only accept=".csv" is working in ubuntu chrome

[nzambello]

I'm fixing this in order to have cross-browser compatibility: https://github.com/nzambello/react-csv-reader/tree/nzambello_fix_accept_type

[nzambello]

I tested it on both Chrome and Firefox and now it works correctly. I'm using macOS.

@darkwebdev @Pardeep94 can you test this in development before I manage to release it?

[darkwebdev]

Fixed for Firefox for Mac 👍

[nzambello]

Thank you all! Released 1.2.1 version.

[AmineBlel]

Hi guys, still got the same problem, it works correctly on Firefox, but with Chrome no.

I'm using ubuntu 18.04