bunlong/react-papaparse

react-papaparse is the fastest in-browser CSV (or delimited text) parser for React. It is full of useful features such as CSVReader, CSVDownloader, readString, jsonToCSV, readRemoteFile, ... etc.

react-papaparse

react-papaparse is the fastest in-browser CSV (or delimited text) parser for React. It is full of useful features such as CSVReader, CSVDownloader, readString, jsonToCSV, readRemoteFile, ... etc.

🎁 Features

• Compatible with both JavaScript and TypeScript
• Easy to use
• Parse CSV files directly (local or over the network)
• Fast mode (is really fast)
• Stream large files (even via HTTP)
• Reverse parsing (converts JSON to CSV)
• Auto-detect delimiter
• Worker threads to keep your web page reactive
• Header row support
• Pause, resume, abort
• Can convert numbers and booleans to their types
• One of the only parsers that correctly handles line-breaks and quotations

🔧 Install

react-papaparse is available on npm. It can be installed with the following command:

npm install react-papaparse --save

react-papaparse is available on yarn as well. It can be installed with the following command:

yarn add react-papaparse --save

📖 Demo & Documentation

• Demo

To learn how to use react-papaparse:

• Documentation

📚 Useful Features

• CSVReader – React component that handles csv files input and returns its content as array.
• CSVDownloader – React component that render the link/button which is clicked to download the data provided in CSV format.
• readString – The function that read CSV comma separated string and returns its content as array.
• readRemoteFile – The function that read remote CSV files and returns its content as array.
• jsonToCSV – The function that read an array of object (json) and returns its content as CSV comma separated string.

💡 Usage

🎀 CSVReader

Basic Upload

import React, { CSSProperties } from 'react';

import { useCSVReader } from 'react-papaparse';

const styles = {
  csvReader: {
    display: 'flex',
    flexDirection: 'row',
    marginBottom: 10,
  } as CSSProperties,
  browseFile: {
    width: '20%',
  } as CSSProperties,
  acceptedFile: {
    border: '1px solid #ccc',
    height: 45,
    lineHeight: 2.5,
    paddingLeft: 10,
    width: '80%',
  } as CSSProperties,
  remove: {
    borderRadius: 0,
    padding: '0 20px',
  } as CSSProperties,
  progressBarBackgroundColor: {
    backgroundColor: 'red',
  } as CSSProperties,
};

export default function CSVReader() {
  const { CSVReader } = useCSVReader();

  return (
    <CSVReader
      onUploadAccepted={(results: any) => {
        console.log('---------------------------');
        console.log(results);
        console.log('---------------------------');
      }}
    >
      {({
        getRootProps,
        acceptedFile,
        ProgressBar,
        getRemoveFileProps,
      }: any) => (
        <>
          <div style={styles.csvReader}>
            <button type='button' {...getRootProps()} style={styles.browseFile}>
              Browse file
            </button>
            <div style={styles.acceptedFile}>
              {acceptedFile && acceptedFile.name}
            </div>
            <button {...getRemoveFileProps()} style={styles.remove}>
              Remove
            </button>
          </div>
          <ProgressBar style={styles.progressBarBackgroundColor} />
        </>
      )}
    </CSVReader>
  );
}

Click and Drag Upload

import React, { useState, CSSProperties } from 'react';

import {
  useCSVReader,
  lightenDarkenColor,
  formatFileSize,
} from 'react-papaparse';

const GREY = '#CCC';
const GREY_LIGHT = 'rgba(255, 255, 255, 0.4)';
const DEFAULT_REMOVE_HOVER_COLOR = '#A01919';
const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
  DEFAULT_REMOVE_HOVER_COLOR,
  40
);
const GREY_DIM = '#686868';

const styles = {
  zone: {
    alignItems: 'center',
    border: `2px dashed ${GREY}`,
    borderRadius: 20,
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    justifyContent: 'center',
    padding: 20,
  } as CSSProperties,
  file: {
    background: 'linear-gradient(to bottom, #EEE, #DDD)',
    borderRadius: 20,
    display: 'flex',
    height: 120,
    width: 120,
    position: 'relative',
    zIndex: 10,
    flexDirection: 'column',
    justifyContent: 'center',
  } as CSSProperties,
  info: {
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'column',
    paddingLeft: 10,
    paddingRight: 10,
  } as CSSProperties,
  size: {
    backgroundColor: GREY_LIGHT,
    borderRadius: 3,
    marginBottom: '0.5em',
    justifyContent: 'center',
    display: 'flex',
  } as CSSProperties,
  name: {
    backgroundColor: GREY_LIGHT,
    borderRadius: 3,
    fontSize: 12,
    marginBottom: '0.5em',
  } as CSSProperties,
  progressBar: {
    bottom: 14,
    position: 'absolute',
    width: '100%',
    paddingLeft: 10,
    paddingRight: 10,
  } as CSSProperties,
  zoneHover: {
    borderColor: GREY_DIM,
  } as CSSProperties,
  default: {
    borderColor: GREY,
  } as CSSProperties,
  remove: {
    height: 23,
    position: 'absolute',
    right: 6,
    top: 6,
    width: 23,
  } as CSSProperties,
};

export default function CSVReader() {
  const { CSVReader } = useCSVReader();
  const [zoneHover, setZoneHover] = useState(false);
  const [removeHoverColor, setRemoveHoverColor] = useState(
    DEFAULT_REMOVE_HOVER_COLOR
  );

  return (
    <CSVReader
      onUploadAccepted={(results: any) => {
        console.log('---------------------------');
        console.log(results);
        console.log('---------------------------');
        setZoneHover(false);
      }}
      onDragOver={(event: DragEvent) => {
        event.preventDefault();
        setZoneHover(true);
      }}
      onDragLeave={(event: DragEvent) => {
        event.preventDefault();
        setZoneHover(false);
      }}
    >
      {({
        getRootProps,
        acceptedFile,
        ProgressBar,
        getRemoveFileProps,
        Remove,
      }: any) => (
        <>
          <div
            {...getRootProps()}
            style={Object.assign(
              {},
              styles.zone,
              zoneHover && styles.zoneHover
            )}
          >
            {acceptedFile ? (
              <>
                <div style={styles.file}>
                  <div style={styles.info}>
                    <span style={styles.size}>
                      {formatFileSize(acceptedFile.size)}
                    </span>
                    <span style={styles.name}>{acceptedFile.name}</span>
                  </div>
                  <div style={styles.progressBar}>
                    <ProgressBar />
                  </div>
                  <div
                    {...getRemoveFileProps()}
                    style={styles.remove}
                    onMouseOver={(event: Event) => {
                      event.preventDefault();
                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                    }}
                    onMouseOut={(event: Event) => {
                      event.preventDefault();
                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                    }}
                  >
                    <Remove color={removeHoverColor} />
                  </div>
                </div>
              </>
            ) : (
              'Drop CSV file here or click to upload'
            )}
          </div>
        </>
      )}
    </CSVReader>
  );
}

Drag ( No Click ) Upload

import React, { useState, CSSProperties } from 'react';

import {
  useCSVReader,
  lightenDarkenColor,
  formatFileSize,
} from 'react-papaparse';

const GREY = '#CCC';
const GREY_LIGHT = 'rgba(255, 255, 255, 0.4)';
const DEFAULT_REMOVE_HOVER_COLOR = '#A01919';
const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
  DEFAULT_REMOVE_HOVER_COLOR,
  40
);
const GREY_DIM = '#686868';

const styles = {
  zone: {
    alignItems: 'center',
    border: `2px dashed ${GREY}`,
    borderRadius: 20,
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    justifyContent: 'center',
    padding: 20,
  } as CSSProperties,
  file: {
    background: 'linear-gradient(to bottom, #EEE, #DDD)',
    borderRadius: 20,
    display: 'flex',
    height: 120,
    width: 120,
    position: 'relative',
    zIndex: 10,
    flexDirection: 'column',
    justifyContent: 'center',
  } as CSSProperties,
  info: {
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'column',
    paddingLeft: 10,
    paddingRight: 10,
  } as CSSProperties,
  size: {
    backgroundColor: GREY_LIGHT,
    borderRadius: 3,
    marginBottom: '0.5em',
    justifyContent: 'center',
    display: 'flex',
  } as CSSProperties,
  name: {
    backgroundColor: GREY_LIGHT,
    borderRadius: 3,
    fontSize: 12,
    marginBottom: '0.5em',
  } as CSSProperties,
  progressBar: {
    bottom: 14,
    position: 'absolute',
    width: '100%',
    paddingLeft: 10,
    paddingRight: 10,
  } as CSSProperties,
  zoneHover: {
    borderColor: GREY_DIM,
  } as CSSProperties,
  default: {
    borderColor: GREY,
  } as CSSProperties,
  remove: {
    height: 23,
    position: 'absolute',
    right: 6,
    top: 6,
    width: 23,
  } as CSSProperties,
};

export default function CSVReader() {
  const { CSVReader } = useCSVReader();
  const [zoneHover, setZoneHover] = useState(false);
  const [removeHoverColor, setRemoveHoverColor] = useState(
    DEFAULT_REMOVE_HOVER_COLOR
  );

  return (
    <CSVReader
      onUploadAccepted={(results: any) => {
        console.log('---------------------------');
        console.log(results);
        console.log('---------------------------');
        setZoneHover(false);
      }}
      onDragOver={(event: DragEvent) => {
        event.preventDefault();
        setZoneHover(true);
      }}
      onDragLeave={(event: DragEvent) => {
        event.preventDefault();
        setZoneHover(false);
      }}
      noClick
    >
      {({
        getRootProps,
        acceptedFile,
        ProgressBar,
        getRemoveFileProps,
        Remove,
      }: any) => (
        <>
          <div
            {...getRootProps()}
            style={Object.assign(
              {},
              styles.zone,
              zoneHover && styles.zoneHover
            )}
          >
            {acceptedFile ? (
              <>
                <div style={styles.file}>
                  <div style={styles.info}>
                    <span style={styles.size}>
                      {formatFileSize(acceptedFile.size)}
                    </span>
                    <span style={styles.name}>{acceptedFile.name}</span>
                  </div>
                  <div style={styles.progressBar}>
                    <ProgressBar />
                  </div>
                  <div
                    {...getRemoveFileProps()}
                    style={styles.remove}
                    onMouseOver={(event: Event) => {
                      event.preventDefault();
                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                    }}
                    onMouseOut={(event: Event) => {
                      event.preventDefault();
                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                    }}
                  >
                    <Remove color={removeHoverColor} />
                  </div>
                </div>
              </>
            ) : (
              'Drop CSV file here to upload'
            )}
          </div>
        </>
      )}
    </CSVReader>
  );
}

Click ( No Drag ) Upload

import React, { useState, CSSProperties } from 'react';

import {
  useCSVReader,
  lightenDarkenColor,
  formatFileSize,
} from 'react-papaparse';

const GREY = '#CCC';
const GREY_LIGHT = 'rgba(255, 255, 255, 0.4)';
const DEFAULT_REMOVE_HOVER_COLOR = '#A01919';
const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
  DEFAULT_REMOVE_HOVER_COLOR,
  40
);
const GREY_DIM = '#686868';

const styles = {
  zone: {
    alignItems: 'center',
    border: `2px dashed ${GREY}`,
    borderRadius: 20,
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    justifyContent: 'center',
    padding: 20,
  } as CSSProperties,
  file: {
    background: 'linear-gradient(to bottom, #EEE, #DDD)',
    borderRadius: 20,
    display: 'flex',
    height: 120,
    width: 120,
    position: 'relative',
    zIndex: 10,
    flexDirection: 'column',
    justifyContent: 'center',
  } as CSSProperties,
  info: {
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'column',
    paddingLeft: 10,
    paddingRight: 10,
  } as CSSProperties,
  size: {
    backgroundColor: GREY_LIGHT,
    borderRadius: 3,
    marginBottom: '0.5em',
    justifyContent: 'center',
    display: 'flex',
  } as CSSProperties,
  name: {
    backgroundColor: GREY_LIGHT,
    borderRadius: 3,
    fontSize: 12,
    marginBottom: '0.5em',
  } as CSSProperties,
  progressBar: {
    bottom: 14,
    position: 'absolute',
    width: '100%',
    paddingLeft: 10,
    paddingRight: 10,
  } as CSSProperties,
  zoneHover: {
    borderColor: GREY_DIM,
  } as CSSProperties,
  default: {
    borderColor: GREY,
  } as CSSProperties,
  remove: {
    height: 23,
    position: 'absolute',
    right: 6,
    top: 6,
    width: 23,
  } as CSSProperties,
};

export default function CSVReader() {
  const { CSVReader } = useCSVReader();
  const [zoneHover, setZoneHover] = useState(false);
  const [removeHoverColor, setRemoveHoverColor] = useState(
    DEFAULT_REMOVE_HOVER_COLOR
  );

  return (
    <CSVReader
      onUploadAccepted={(results: any) => {
        console.log('---------------------------');
        console.log(results);
        console.log('---------------------------');
        setZoneHover(false);
      }}
      onDragOver={(event: DragEvent) => {
        event.preventDefault();
        setZoneHover(true);
      }}
      onDragLeave={(event: DragEvent) => {
        event.preventDefault();
        setZoneHover(false);
      }}
      noDrag
    >
      {({
        getRootProps,
        acceptedFile,
        ProgressBar,
        getRemoveFileProps,
        Remove,
      }: any) => (
        <>
          <div
            {...getRootProps()}
            style={Object.assign(
              {},
              styles.zone,
              zoneHover && styles.zoneHover
            )}
          >
            {acceptedFile ? (
              <>
                <div style={styles.file}>
                  <div style={styles.info}>
                    <span style={styles.size}>
                      {formatFileSize(acceptedFile.size)}
                    </span>
                    <span style={styles.name}>{acceptedFile.name}</span>
                  </div>
                  <div style={styles.progressBar}>
                    <ProgressBar />
                  </div>
                  <div
                    {...getRemoveFileProps()}
                    style={styles.remove}
                    onMouseOver={(event: Event) => {
                      event.preventDefault();
                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                    }}
                    onMouseOut={(event: Event) => {
                      event.preventDefault();
                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                    }}
                  >
                    <Remove color={removeHoverColor} />
                  </div>
                </div>
              </>
            ) : (
              'Click to upload'
            )}
          </div>
        </>
      )}
    </CSVReader>
  );
}

🎀 CSVDownloader

Just pass in the js object with an optional configuration ( setting delimiter / separator ).

Note: If you want to open your CSV files in Excel, you might want to set bom={true} or bom, default is false. This option adds the so called BOM byte '\ufeff' to the beginning of your CSV files and tells Excel that the encoding is UTF8.

Button

import React from 'react';

import { useCSVDownloader } from 'react-papaparse';

export default function CSVDownloader() {
  const { CSVDownloader, Type } = useCSVDownloader();

  return (
    <CSVDownloader
      type={Type.Button}
      filename={'filename'}
      bom={true}
      config={{
        delimiter: ';',
      }}
      data={[
        {
          'Column 1': '1-1',
          'Column 2': '1-2',
          'Column 3': '1-3',
          'Column 4': '1-4',
        },
        {
          'Column 1': '2-1',
          'Column 2': '2-2',
          'Column 3': '2-3',
          'Column 4': '2-4',
        },
        {
          'Column 1': '3-1',
          'Column 2': '3-2',
          'Column 3': '3-3',
          'Column 4': '3-4',
        },
        {
          'Column 1': 4,
          'Column 2': 5,
          'Column 3': 6,
          'Column 4': 7,
        },
      ]}
    >
      Download
    </CSVDownloader>
  );
}

Link

import React from 'react';

import { useCSVDownloader } from 'react-papaparse';

export default function CSVDownloader() {
  const { CSVDownloader, Type } = useCSVDownloader();

  return (
    <CSVDownloader
      type={Type.Link}
      filename={'filename'}
      bom={true}
      data={`Column 1,Column 2,Column 3,Column 4
1-1,1-2,1-3,1-4
#2-1,मुकेश,ខ្ញុំ,2-4
3-1,3-2,អ្នក,3-4
4,5,6,7`}
    >
      Download
    </CSVDownloader>
  );
}

Data as a Function/Callback

data={} can be a synchronous or asynchronous function that returns a data object.

import React from 'react';

import { useCSVDownloader } from 'react-papaparse';

export default function CSVDownloader() {
  const { CSVDownloader } = useCSVDownloader();

  return (
    <CSVDownloader
      filename={'filename'}
      data={() => {
        return [
          {
            "Column 1": "1-1",
            "Column 2": "1-2",
            "Column 3": "1-3",
            "Column 4": "1-4",
          }
        ]}
      }
    >
      Download
    </CSVDownloader>
  );
}

🎀 readString

import React from 'react';

import { usePapaParse } from 'react-papaparse';

export default function ReadString() {
  const { readString } = usePapaParse();

  const handleReadString = () => {
    const csvString = `Column 1,Column 2,Column 3,Column 4
1-1,1-2,1-3,1-4
2-1,2-2,2-3,2-4
3-1,3-2,3-3,3-4
4,5,6,7`;

    readString(csvString, {
      worker: true,
      complete: (results) => {
        console.log('---------------------------');
        console.log(results);
        console.log('---------------------------');
      },
    });
  };

  return <button onClick={() => handleReadString()}>readString</button>;
}

🎀 readRemoteFile

import React from 'react';

import { usePapaParse } from 'react-papaparse';

export default function ReadRemoteFile() {
  const { readRemoteFile } = usePapaParse();

  const handleReadRemoteFile = () => {
    readRemoteFile(url, {
      complete: (results) => {
        console.log('---------------------------');
        console.log('Results:', results);
        console.log('---------------------------');
      },
    });
  };

  return <button onClick={() => handleReadRemoteFile()}>readRemoteFile</button>;
}

🎀 jsonToCSV

import React from 'react';

import { usePapaParse } from 'react-papaparse';

export default function JsonToCSV() {
  const { jsonToCSV } = usePapaParse();

  const handleJsonToCSV = () => {
    const jsonData = [
      {
          "Column 1": "1-1",
          "Column 2": "1-2",
          "Column 3": "1-3",
          "Column 4": "1-4"
      },
      {
          "Column 1": "2-1",
          "Column 2": "2-2",
          "Column 3": "2-3",
          "Column 4": "2-4"
      },
      {
          "Column 1": "3-1",
          "Column 2": "3-2",
          "Column 3": "3-3",
          "Column 4": "3-4"
      },
      {
          "Column 1": 4,
          "Column 2": 5,
          "Column 3": 6,
          "Column 4": 7
      }
    ];
    const results = jsonToCSV(jsonData);
    console.log('---------------------------');
    console.log('Results:', results);
    console.log('---------------------------');
  };

  return <button onClick={() => handleJsonToCSV()}>jsonToCSV</button>;
}

Header Row Support

If you tell react-papaparse there is a header row, each row will be organized by field name instead of index.

import { usePapaParse } from 'react-papaparse';

const { readString } = usePapaParse();

readString(csvString, {
  header: true,
  worker: true,
  complete: (results) => {
    console.log('---------------------------');
    console.log(results);
    console.log('---------------------------');
  },
});

Stream

That's what streaming is for. Specify a step callback to receive the results row-by-row. This way, you won't load the whole file into memory and crash the browser.

import { usePapaParse } from 'react-papaparse';

const { readRemoteFile } = usePapaParse();

readRemoteFile(url, {
  step: (row) => {
    console.log('Row:', row.data);
  },
  complete: () => {
    console.log('All done!');
  }
});

📜 Changelog

Latest version 4.4.0 (2023-10-14):

• Handle parsing utf-8 bom encoded files
• Rename duplicate headers
• Improve iso-date regex

Version 4.3.0 (2023-10-10):

• Enable async callback function for CSVDownloader

Version 4.2.2 (2023-10-09):

• Fix type

Version 4.2.0 (2023-10-07):

• Upgrade dependencies

Version 4.1.0 (2022-08-07):

• Import readString, readRemoteFile and jsonToCSV as pure function

Version 4.0.4 (2022-08-06):

• Add optional required prop for input file

Version 4.0.2 (2022-01-26):

• Fix onUploadAccepted signature when a preview is set

Version 4.0.1 (2022-01-21):

• Fix config props does not work in CSVReader

Version 4.0.0 (2022-01-18):

• Improve code performance
• Rewrite any existing based components to hooks

Details changes for each release are documented in the CHANGELOG.md.

🛣️ Roadmap

🆕 v4.4.x

• CSVReader multiple files drag and drop

❗ Issues

If you think any of the react-papaparse can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.

💪 Contribution

We'd love to have your helping hand on contributions to react-papaparse by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

• Open pull request with improvements
• Discuss ideas in issues
• Spread the word
• Reach out with any feedback

🏆 Contributors

Bunlong	Tim Tutt	Pieter Kuppens	Jack Zhao	Pablo Menichini	Mystical Tech
Bruno	Samuel Hulla	glinkot	Paul Leavitt	Gabriel	Izaak
Oliver	Ole Skaar	Des	Karl	Max	Kostas
Dalitzky	John Quinlivan	Gareth Jones	Chrys Exaucet	Stefee	Christopher Thomas
Venelin Banov	Joey Baker	Michiel De Mey	Mohammed Hussam	Xiaochao Liu	Jake Haitsma

👨‍👩‍👦 Advertisement

You maybe interested.

• React Patterns – React patterns & techniques to use in development for React Developer.
• Next Share – Social media share buttons for your next React apps.
• Next QRCode – React hooks for generating QR code for your next React apps.
• Next Time Ago – A lightweight tiny time-ago component for your next React apps.

⚖️ License

The MIT License

react-papaparse's Issues

How to use config options with readRemoteFile?

I can't get this to work.

Any hints?

` const configOptions = {header: true, dynamicTyping: true};

    readRemoteFile(
        default, configOptions,
        {
            complete: function (results) {
                console.log(results);
                console.log(results.data[0]);
                console.log(results.data[1]);
            }
        }
    )`

Gets me back data with the header in ...

Changing highlight color

Hi! Love papa parse, it's super easy to use. However, I've been struggling to figure out how to style the border-color attribute of the div aroud the input field when you drag a file over the drag and drop (with the dashed lines). It seems to default to purple. I've tried changing style attributes for the CSVreader component, but I can't seem to find anything that relates to this styling. Am I missing something, or is that hardcoded?

The Local File demo is not outputting anything in the console

In the demo as well as locally, the following code does not output anything when uploading a file.

import React, { Component } from 'react'
import { CSVReader } from 'react-papaparse'

export default class CSVReader2 extends Component {
  handleOnDrop = (data) => {
    console.log('---------------------------')
    console.log(data)
    console.log('---------------------------')
  }

  handleOnError = (err, file, inputElem, reason) => {
    console.log(err)
  }

  handleOnRemoveFile = (data) => {
    console.log('---------------------------')
    console.log(data)
    console.log('---------------------------')
  }

  render() {
    return (
      <>
        <h5>Click and Drag Upload</h5>
        <CSVReader
          onDrop={this.handleOnDrop}
          onError={this.handleOnError}
          addRemoveButton
          onRemoveFile={this.handleOnRemoveFile}
        >
          <span>Drop CSV file here or click to upload.</span>
        </CSVReader>
      </>
    )
  }
}

Am I missing something? The string parsing demo works like a charm

Config complete and step is not triggered when uploading

Hello, its a good package to used, very helpfull for me. appreciate it.

but can someone tell me, how to trigger complete and step config ?
because i tried to console.log , but it never show me anything.

nothing on docs are tells me how to do it, im working on local files (not stream)

Goals is, when user finaly success load the files to input, i want to show them the percentage of the progress then after its complete i want to upload it to the api service so Backend can proccess it

using CSVReader is breaking in IE

I am using react-papaparse for uploading a csv file in the UI. I use CSVReader component . The page is breaking in IE if I use this component. Screenshot attached. Please assist with this.

<CSVReader onFileLoad={this.uploadFile} addRemoveButton={true} onRemoveFile={this.removeImportFile} noProgressBar={true} style={{ dropArea: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", padding: "8px 20px", borderWidth: "1px", borderRadius: "5px", borderColor: "#515151", borderStyle: "dashed", backgroundColor: "#fff", outline: "none", height: "auto", transition: "border .24s ease-in-out", cursor: "pointer", overflow: "hidden", }, dropFile: { width: "auto", maxWidth: "200px", fontSize: "12px", lineHeight: "16px", height: 50, borderRadius: "5px", overflow: "hidden", padding: "10px", }, fileNameInfo: { overflow: "hidden", textOverflow: "ellipsis", maxWidth: "150px", }, removeButton: { color: "#828282", }, }} > <span className="item-content"> <div className="item-title">Upload CSV file</div> <div className="item-sub-text"> Drag & drop your file or select your file by clicking here. </div> </span> </CSVReader>

API change with minor version upgrade

I recently updated my npm packages and react-paparse updated from version 2.0.2 to version 2.1.3.

The problem is the minor update is very non-compliant with the NPM versioning.

The props changed for the CSVReader component and was not backwards compatible (which it should be if only updating minor version).

error when running "npm run build"

when running npm run build I get the following error:

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

./node_modules/react-papaparse/dist/react-papaparse.es.js:13:28612 

My setup is using create-react-app and node v8 and node v13 was tried

Add example of exporting table data to/as (Input string / json then download) CSV file

how validate csv file only

Add microbundle

Remove/Edit styles to customize div

Hi,

So I am trying to manipulate the look of the dropzone to fit our sites current theme but I can't manage to do it because the styles are being applied inline. It would be helpful to have a way to customize the dropzone

rather than the .

Hopefully this can be an easy fix.

Thanks

Design More New Templates

Trying to get correct JSON format (`header:true`) of uploaded CSV file

Documentation is not consistent with code. Should be config instead of configOptions and onFileLoad instead of onFileLoaded.
Code in Read.me section Header row support
Instead of

<CSVReader
  onFileLoaded={this.handleReadCSV}
  inputRef={this.fileInput}
  style={{display: 'none'}}
  onError={this.handleOnError}
  configOptions={{header: true /* Header row support */ }}
/>

It should be

<CSVReader
  onFileLoad={this.handleReadCSV}
  inputRef={this.fileInput}
  style={{display: 'none'}}
  onError={this.handleOnError}
  config={{header: true /* Header row support */ }}
/>

allow disabled/error states

have props that allow it to be error state (red border).
have props that allow it to be disabled.

encoding issue with CSReader when the csv come from excel

Hello,

I am having an encoding problem with the CSVReader feature. I am working with a client who use an old version of microsoft excel.
When he save a csv from excel, the generated csv file is apparently not encoded in utf-8 but in Latin1 (iso-8859-1)
Thus, when he uploads his file, the French special characters like "é", "î" ... are replaced by �

I saw that there was a way to change the encoding with "encoding (The encoding to use when opening local files. If specified, it must be a value supported by the FileReader API.) on this page : https://react-papaparse.js.org/docs
I have just to add encoding = iso-8859-1 ? But I did not understand in which part of the code should I add it

Here is the code if my app :

onFileLoad={handleOnFileLoad}
onError={handleOnError}
ref={buttonRef}
noClick
noDrag

>
{({ file }) => (
  <aside
    style={{
      display: 'flex',
      flexDirection: 'row',
      marginBottom: 10,
      alignItems: "baseline"
    }}
  >
    <Button
    className={classes.button}
    onClick={handleOpenDialog}
    variant="contained"
    color="primary"
    component="span">
      {trad.browse_file}
    </Button>
    <Typography>{file && file.name}</Typography>

  </aside>
)}
</CSVReader>

And thanks you very much for this package !

Post raw csv to external API *before* parsing

Hi there! We are just getting started with react-papaparse and are liking it so far! The one question we have at the moment is whether it is possible to use the Drop Area for csv import, but to post the raw csv file to an external API before continuing with csv parsing.

So, suppose I have a csv on my local machine and want to save the original to a file store (e.g. S3) via an API before continuing to parse. Does this functionality already exist?

Thanks!

React Hook

Hi Bunlong,

This looks like the perfect solution for a project I am currently working on.
Is there any chance that you will create a React hook version of the CsvReader implementation soon?
Keep up the excellent work!

How to remove uploaded file

Hi! I am using CSVReader Click and Drag upload. I want to have a functionality to cancel uploaded file. Meaning when I click an another button I want uploaded file to be removed from CSVReader. Is there such functionality? I couldn't find it

Cannot stream or chunk with CSVReader

Hi,

I am trying to chunk a CSV file on upload with CSVReader using the callback as said in documentation. My current attempt looks like

				onDrop={handleOnDrop}
				onError={handleOnError}
				config={{header:true, worker: true, skipEmptyLines: true,
					step: (results:any, parser:any) => {
						console.log("hello")
						console.log("Row data:", results.data)
						console.log("Row errors:", results.errors)
					},
					complete: () => console.log("Done!")
				}}
				addRemoveButton
				onRemoveFile={handleOnRemoveFile}
			>
				<span>Drop CSV file here or click to upload.</span>
			</CSVReader>

Currently the data is never displayed to the console in any way and I cannot understand why?

Any help would be greatly appreciated, thank you!

CSVDownloader and Performance

react-papaparse v3.8.0

Draft 1

const jsonData = [
  ["firstname", "lastname", "email"],
  ["Ahmed", "Tomi", "[email protected]"],
  ["Raed", "Labes", "[email protected]"],
  ["Yezzi", "Min l3b", "[email protected]"]
]

<CSVDownloader data={jsonData} target="_blank">Download</CSVDownloader>

Draft 2

const str = `Column 1,Column 2,Column 3,Column 4
1-1,1-2,1-3,1-4
2-1,2-2,2-3,2-4
3-1,3-2,3-3,3-4
4,5,6,7`

<CSVDownloader data={str} target="_blank">Download</CSVDownloader>

this.buttonRef.current.removeFile is not a function

I tried deleting the selected file, on click of a button. Like so,

if (buttonRef.current) {
  buttonRef.current.removeFile(e)
}

But the error this.buttonRef.current.removeFile is not a function came up. Upon further inspection, I saw that the removeFile function is not present in the ref. How to remove a file then?

IE - Syntax Error: class

Hi there,

I'm integrating this library within my React project but it breaks in Internet Explorer 11, I thought something was wrong with my implementation but found out that even if you open your demo page in Internet Explorer 11 it breaks too.

Digging a bit I found the issue comes from using class straight away in one of your dist files, you can check it out here and look for class re extends Q.

I think the best would to change the library babe config to transform class while building the npm module but, do you have any other way to fix it with your current versions?

Thanks a lot!

How to detect the encoding of the loaded file before displaying data ?

Hi !

I had a problem for displaying special characters with CVSReader due to csv files which were encoded as ISO-8859-1 instead of utf-8 (ex : Pyr�n�es-Atlantiques )

By adding :

<CSVReader
  config={
    encoding: "ISO-8859-1",
  }
>
 ...
</CSVReader>

in my code it's working, the browser can now read special characters without problems. But the new problem is when loading a file encoded in utf-8, the characters are not displayed properly (ex : Pyrénées-Atlantiques )

My problem is that I am working with clients who do not use the same encoding for their csv files. Some clients use "utf-8", others use "ISO-8859-1". And I can not know in advance what will be the encoding of the file used.

Here is my code :

let changeEncoding = false 
  
   const  handleOnFileLoad = (data) => {
  
    data.map(element => {
      if (element.data.find(element => element.includes("�"))) {
        changeEncoding = true
      } 
    })
    if (changeEncoding) {
      alert("Some characters of your file will not display properly. Please load again yout file.")
      dispatch(setEncodingForExport("ISO-8859-1"))
    } else {
      dispatch(setEncodingForExport("UTF-8"))
    }
    data = data.slice(1)
  
    const enrollFieldArray = {}
  
    enrollFieldArray["data"] = data.map((element => 
      element.data
    ))
  
    dispatch(getDataFromUploadedCsv(enrollFieldArray));
    displayTable();
  
  
  };
  <CSVReader
  onFileLoad={handleOnFileLoad}
  onError={handleOnError}
  ref={buttonRef}
  noClick
  noDrag
  config={encoding}
  >

I use redux and the "encoding" variable is in the state with this default value :

encoding: {encoding: "UTF-8"}

With this solution, the client must load the file a first time to update the state with the correct value of "encoding", and load the file a second time to display data with the correct encoding.

Is there a native CSVReader's method that allows you to detect the encoding of the loaded file before displaying the data ?

Thank you very much for your help

Dimitri

useHook

Feature

Create useHook component in the future.

Upload multiple CSV files for both basic upload and drop upload

BOM byte for opening CSV in Excel with UTF8

Hi, thanks for react-papaparse.

After discussing it at mholt/PapaParse#830, I wonder, if you would be willing to add an option for a BOM byte, so that Excel recognizes the CSV directly as UTF8. react-csv-downloader is doing it here, but I would like to move to react-papaparse because I also would need the upload functionality.

The API could be

<CSVDownloader
  data={data}
  filename={'filename'}
  type={'link'}
  bom={true}
>
  Download
</CSVDownloader>

Thanks a lot.

Typescript definition support

I get following error when I import

Could not find a declaration file for module 'react-papaparse'. '/home/apoorvmote/import-export/node_modules/react-papaparse/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-papaparse` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-papaparse';`ts(7016)

Customize UI

Is there a way to customize the styles of the components?
Especially on the drag and drop, i want to customize the box that shows up with the filename, progress bar, etc

downloadRequestHeaders config does not work

Hi,

I am trying to read data from s3 and due to CORS I have to add Origin header but it looks like it's not setting the header as expected in Chrome. I now it should be added by default by browser but I do not see any origin header in the network tab.

Chrome: does not work
Safari: Refused to set unsafe header "Origin"
Opera: works but gives error papaparse.js:699 Refused to get unsafe header "Content-Range"

readRemoteFile(
    'https://some-s3.url.com/sample.csv',
    {
        downloadRequestHeaders: {
            'Origin': 'http://example.com/'
        },
        step: (row) => {
            console.log('Row:', row.data)
        },
        complete: (results) => {
            console.log('Results:', results)
        }
    }
);

Thanks in advance.

Add props to change accept type on input element

Hi, Your repo is great.
But when I'm using this on different OS that I found a bug
This is hard code so it hard for me to change accept type
accept="text/csv"
Above Code work fine on MacOS

But on Window10 / Ubuntu it should be this
accept=".csv, application/vnd.ms-excel, text/csv"

Could you make a change let user can change it as props?

Cannot find a way to remove a file programatically

My specific use case is after a successful parse, I want to show an upload form, with a preview of the parsed data. So far so good, but if the upload succeeds, or if the user elects to cancel the form, I want to return to the state things were in before a file was dropped.

I have found your component to be very easy to use so far. Thanks.

Doesn't support all valid CSV files

https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/907679/evhs-installer-authorisations-log.csv

This is the results of the first column from the first 3 (or 4) rows:

Company Name
(UK) IDES Ltd
100% Electrical
,Totland Bay ,PO39 0EZ,,,,"South East England, South West England

Customise dropArea

Can you add the ability to customise the dropArea using the style prop?

disable progress bar

even with child as a function i can't disable to progress bar

Change color remove button

Hello, thank you for this nice helper lib on top of papa parse, really practical. How can I change the color of the remove button?

I want to change the red color and disable the hover effect. I know it is SVG and that the color is set with fill attribute of path, but don't really know how to change it. Any help would be really appreciated! Thanks 🙏🏻

Csv file seperated by commas in a single row makes the browser unresponsive

When I try to upload a csv file seperated by commas in a single row, the browser becomes unresponsive. But the same file with multiline approach is getting uploaded.
For eg:
This file makes the browser unresponsive
1234566789, 9877665443, 0987654321
whereas the multiline approach works

1234567899
9876543211
0987654311

I have used 1 million record

CSVDownload - Writing out a # causes crash - Bug?

I'm creating a CSVDownload and notice if any of my data has a # at the start of the string, it crashes (well, the file output stops at the # character).

See here - File terminates where it should have written out '#123456'

If I remove the # from the string in my data generation, the file generates fully.

NOTE: Using v3.12.0

Preview Config Option Causes Data Not To Load

Hi -

Just started toying around with react-papaparse, and was trying to pass in the preview options into the config for papa parse like below:

<CSVReader
              onDrop={this.handleOnDrop}
              onError={this.handleOnError}
              addRemoveButton
              onRemoveFile={this.handleOnRemoveFile}
              config={{
                header: this.state.hasHeaderRow,
                dynamicTyping: true,
                preview: 1000
              }}
              style={{minHeight: "200px"}}
            >

Unfortunately when preview is passed my handleOnDrop function is never called. When I remove that option everything works as expected. Am I missing something with this particular functionality?

Support in functional Components

I added the package and followed the Demo to create a drag or click reader. The problem is when i used the component inside my functional component it gives "cant read onDrag of undefined" error. Does this package not support running on functional components?

How do you setup worker threads with the CSV Reader?

CSVDownloader fails to export all data

Hi!

When I'm using CSVDownloader the exported CSV file contains 59 rows of data of the 330 rows I expect. It's not a huge amount of data, the dowloaded CSV file is 51kb. Do I have to use some kind of stream when downloading larger amounts of data? I've just updated to version 3.9 but that didn't fix it.

Best Regards,

Ludwig

Unable to parse column names of certain type

For example, table names with s.table, s.process are returned with undefined issues as s is being treated as an object and not as a string. Also error is on emitted in onError. So component crashes.

Adding "sep=," to csv file to solve locality issue

When downloading the CSV file, Excel doesn't recognise the separator when european locations are set.

Would it be possible to add a single line with "sep=," to the csv file to solve this?

Can see a guide for the issue here: https://support.affinity.co/hc/en-us/articles/360044453711-How-to-open-CSV-files-with-the-correct-delimiter-separator

Best Regards,

Ludwig Hedlund

Proposal: Customizable progress bar

Proposal: Customizable progress bar

Reasoning: At the moment it feels clunky to only be able to pass boolean to noProgressBar and being able to pass progressBarColor as the only means of customization since you can't even detect at the moment when the data was actually passed to onFileLoad or onDrop

• Option 1: Access progress value directly from child render function

  The same way you can currently access the file inside the child render function

  Before ⏳

  <CSVReader>
    {({ file }) => (
       // render
    )}
  </CSVReader>

  After ⌛

  <CSVReader>
    {({ file, progress }) => (
       // render
    )}
  </CSVReader>

• Option 2: Allow users to pass custom progress bar render callback function

  This way the users will have greater control as to how the progress bar is displayed

  After ⌛

  // CSVReader.tsx
  
  type Props = {
    // optional, defaults to existing one
    renderProgressBar?: (...args: any[]) => (progress: number) => JSX.Element
  }
  
  // later in render method
  render () {
  
     const { renderProgressBar } = this.props
     const { progressBar } = this.state 
  
     return (
        // other stuff
       { progressBar 
          ? renderProgressBar(progressBar)
          : <ProgressBar />
       }
     )
  }

This way the users could customize the progress bar without introducing breaking changes to the existing implementation while making it more flexible.

Add config props to CSVDownloader

Make CSVReader nested class position/ordering to be flexible

PR: #47

dark mode cannot read default template

Also, can we optionally disable progressbar and fileSize?

[QUESTION]

Is it posible to change
dropFileRemoveButton: { height: 23, position: 'absolute', right: 6, top: 6, width: 23, }
in CSVReader (Drag to Upload) Style. It is not included in the wiki and I was wondering if I could modify the dropFileRemoveButton.
Kind Regards
Lluis

controlled input

provide a way to control the upload.
For example if I reset the form I want to clear the upload file programatically.

jest snapshot of CSV Reader is not resolved: Error: Uncaught TypeError: Cannot read property 'addEventListener' of null

I have this stack trace while taking a snap of a custom file reader. The component is working well except in this snapshot. It throws this error:

console.error Error: Uncaught [TypeError: Cannot read property 'removeEventListener' of null]

Here is my stack

[email protected]
[email protected]
[email protected]

Steps To Reproduce

// component

import React from 'react';
import { CSVReader } from 'react-papaparse';


interface CustomtReaderProps {
  onFileLoaded?: ((data: any, file?: any) => void) | undefined;
}

export const CustomtReader: React.FC<CustomtReaderProps> = (props: CustomtReaderProps) => {

  const { onFileLoaded } = props;
  return (
    <CSVReader
      onFileLoad={onFileLoaded}
      accept='text/csv, .csv'
    >
      <span>{label}</span>
    </CSVReader>
  );

};

// test

describe('OffreTransportReader', () => {


  it('should match snapshot', () => {

    /* FIXME: in the renderer:  Uncaught [TypeError: Cannot read property 'addEventListener' of null]
                                Stacktrace:    Error: Uncaught [TypeError: Cannot read property 'addEventListener' of null]
                                hint: possibly due to the renderer method of  @react-test-render
 */


    const handleFileUploaded = jest.fn().mockImplementation();

    const tree = renderer
      .create(     // <--------------- **_error : TypeError: Cannot read property 'removeEventListener' of null_**
        <CustomtReader
          onFileLoaded={handleFileUploaded}
          label='Chargez votre offre'
        />,
      )
      .toJSON();
    expect(tree).toMatchSnapshot();
  });
});

The current behavior

Error: Uncaught [TypeError: Cannot read property 'addEventListener' of null]

The expected behavior

Test passes