my-upload-csv v3.8.0

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

📖 Demo & Documentation

• Demo

To learn how to use react-papaparse:

• Documentation

FAQ:

• How to customize CSVReader (Drag to upload) style?
• How to reset CSVReader?
• Sample of using CSVReader isSet

📚 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, { Component } from 'react'

import { CSVReader } from 'react-papaparse'

const buttonRef = React.createRef()

export default class CSVReader extends Component {
  handleOpenDialog = (e) => {
    // Note that the ref is set async, so it might be null at some point 
    if (buttonRef.current) {
      buttonRef.current.open(e)
    }
  }
  
  handleOnFileLoad = (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('---------------------------')
  }

  handleRemoveFile = (e) => {
    // Note that the ref is set async, so it might be null at some point
    if (buttonRef.current) {
      buttonRef.current.removeFile(e)
    }
  }

  render() {
    return (
      <CSVReader
        ref={buttonRef}
        onFileLoad={this.handleOnFileLoad}
        onError={this.handleOnError}
        noClick
        noDrag
        onRemoveFile={this.handleOnRemoveFile}
      >
        {({ file }) => (
          <aside
            style={{
              display: 'flex',
              flexDirection: 'row',
              marginBottom: 10
            }}
          >
            <button
              type='button'
              onClick={this.handleOpenDialog}
              style={{
                borderRadius: 0,
                marginLeft: 0,
                marginRight: 0,
                width: '40%',
                paddingLeft: 0,
                paddingRight: 0
              }}
            >
              Browe file
            </button>
            <div
              style={{
                borderWidth: 1,
                borderStyle: 'solid',
                borderColor: '#ccc',
                height: 45,
                lineHeight: 2.5,
                marginTop: 5,
                marginBottom: 5,
                paddingLeft: 13,
                paddingTop: 3,
                width: '60%'
              }}
            >
              {file && file.name}
            </div>
            <button
              style={{
                borderRadius: 0,
                marginLeft: 0,
                marginRight: 0,
                paddingLeft: 20,
                paddingRight: 20
              }}
              onClick={this.handleRemoveFile}
            >
              Remove
            </button>
          </aside>
        )}
      </CSVReader>
    )
  }
}

Click and Drag Upload

import React, { Component } from 'react'

import { CSVReader } from 'react-papaparse'

export default class CSVReader 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 (
      <CSVReader
        onDrop={this.handleOnDrop}
        onError={this.handleOnError}
        addRemoveButton
        removeButtonColor='#659cef'
        onRemoveFile={this.handleOnRemoveFile}
      >
        <span>Drop CSV file here or click to upload.</span>
      </CSVReader>
    )
  }
}

Drag ( No Click ) Upload

import React, { Component } from 'react'

import { CSVReader } from 'react-papaparse'

export default class CSVReader 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 (
      <CSVReader
        onDrop={this.handleOnDrop}
        onError={this.handleOnError}
        noClick
        addRemoveButton
        onRemoveFile={this.handleOnRemoveFile}
      >
        <span>Drop CSV file here to upload.</span>
      </CSVReader>
    )
  }
}

Click ( No Drag ) Upload

import React, { Component } from 'react'

import { CSVReader } from 'react-papaparse'

export default class CSVReader 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 (
      <CSVReader
        onDrop={this.handleOnDrop}
        onError={this.handleOnError}
        noDrag
        addRemoveButton
        onRemoveFile={this.handleOnRemoveFile}
      >
        <span>Click to upload.</span>
      </CSVReader>
    )
  }
}

🎀 CSVDownloader

Button

import React, { Component } from 'react'

import { CSVDownloader } from 'react-papaparse'

export default class CSVDownloader extends Component {
  render() {
    return (
      <CSVDownloader
        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,
          },
        ]}
        type="button"
        filename={'filename'}
      >
        Download
      </CSVDownloader>
    )
  }
}

Link

import React, { Component } from 'react'

import { CSVDownloader } from 'react-papaparse'

export default class CSVDownloader extends Component {
  render() {
    return (
      <CSVDownloader
        data={`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`}
        filename={'filename'}
        type={'link'}
      >
        Download
      </CSVDownloader>
    )
  }
}

🎀 readString

import { readString } from 'react-papaparse'

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`

const results = readString(str)

🎀 readRemoteFile

import { readRemoteFile } from 'react-papaparse'

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

🎀 jsonToCSV

import { jsonToCSV } from 'react-papaparse'

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)

Header row support

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

const results = readString(csvString {
  header: true
})

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.

readRemoteFile('http://example.com/big.csv', {
  step: (row) => {
    console.log('Row:', row.data)
  },
  complete: () => {
    console.log('All done!')
  }
})

📜 Changelog

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

🛣️ Roadmap

🆕 v3.9.x

• Improve CSVDownloader
• CSVReader multiple files drag and drop

🆕 v4.0.x

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

❗ 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

👨‍👩‍👦 Family

You might be interested in:

• React Patterns – React patterns & techniques to use in development for React Developer.
• next-share – The social share buttons plugin for Next.js, Gatsby.js, Create React App as well as React apps.
• react-fullscreen-html – The React component allows its children to enter the browser's fullscreen viewing mode using the Fullscreen HTML5.
• react-webspeech – The official WebSpeech for React.
• react-barcodes – React hooks for generating barcodes.
• react-qrcodes – React hooks for generating qrcodes.

⚖️ License

The MIT License