How to import CSV files in React and Node.js with UseCSV

Guide

How to import CSV files in React and Node.js with UseCSV

If you're working with data, you're going to deal with CSV file formats in some capacity. CSV, or comma-separated values, is a file format that separates data values by commas. It is a common format for storing data - but the consumption of CSV data can be cumbersome, if not bug-riddled.

Here is a walkthrough on how to easily import CSV files in React with UseCSV.

What is UseCSV?

UseCSV is our product that lets you easily add CSV data import to your app. Supporting CSV and all Excel formats, UseCSV makes a versatile service that takes away all the headaches of building a solution in-house.

  • validation rule preconfiguration
  • security first platform for integration to keep data safe
  • ability to handle large import files
  • receive import data as a webhook or callback
  • automatic column matching
  • intuitive frontend CSV import experience

The best part about UseCSV is that you can begin using the platform for free and it comes with a generous free developer tier, allowing you and your team to test and experiment with the integration without restrictions.

Setting up your UseCSV account

To set up your free UseCSV developer account, simply follow this link - no credit card details required - just an email address or Gmail account. Once completed, you will be automatically directed to UseCSV dashboard.

This dashboard will give you an overview of your CSV importers, a link to the documentation, API keys, account settings, and billing. In the top right corner is the 'Add Importer' button. This button will give you the ability to create a new data model for your CSV imports.

01.png

To edit a current data model, click on the View button that is on the same row as your selected importer. When you create an account, there is a preconfigured importer called 'My First Importer'. Click on the View to configure your importer. Here is an example of what this looks like:

02.PNG

There are four main fields that are available within the importer and they are:

  • the 'Key' field - this field contains the API key for your specific importer.
  • the 'Name' field - this field lets you configure the name of your importer.
  • the 'Where to send uploaded data' dropdown - this lets you toggle between receiving CSV imports as a webhook to your backend, or locally as a callback.
  • the 'Webhook URL' field - this field lets you determine where your imported data is sent.

Beneath these four fields is the Column section. This section contains the data model for the importer. To add a new column, click on Add Column button located at the top of the Columns section. There is no limit to how many columns you can create.

Here is a screenshot of the Add Column interface for UseCSV.

03.png

That is basically it for UseCSV's configuration panel.

Add CSV import to your React app

To add CSV import capabilities to your React app, all you need is to import UseCSV library into your app. To do this, first start with a basic React app (or, if you already have an app, you can skip this step).

npx create-react-app usecsv-example cd usecsv-example npm start

To integrate UseCSV into your React app, install the UseCSV React library.

npm i @usecsv/react

To add UseCSV React component to our app, use import @usecsv/react and then drop the UseCSV component.

... import UseCSV from "@usecsv/react"; export default function Home() { return ( <div className={styles.container}> <main className={styles.main}> <UseCSV importerKey="INSERT YOUR IMPORTER KEY HERE" user={{ userId: "yourUserId" }}> Import Data </UseCSV> </main> </div> ) } ...

The user param is a JSON object that is passed as an additional data point that is included in the import. This is useful for identifying the data source such as which user it came from. You may use key-pair values if required.

When you check your http://localhost:3000, you will have an Import Data button available for clicking.

Receive data from imports

There are two ways to send UseCSV your CSV data. The first is via a webhook. The second way is to keep the uploaded data local by passing an onData callback function to your UseCSV component. For more information about using the onData callback, check out the documentation for it here.

For this tutorial, we are going to be using the first method - transforming your CSV data via UseCSV and a webhook.

Add the webhook endpoint

To set up and run a simple Node.js server, create a new directory with a file called server.js.

In server.js, we'll start by requiring the http module. This module will give us the ability to create an HTTP server.

var http = require('http');

Next, we'll create an HTTP server. We'll set it to listen on port 8080.

http.createServer(function (req, res) {

}).listen(8080);

Now that we have our server created, we need to write the code that will handle webhook requests. For this example, we'll simply log the request body to the console.

http.createServer(function (request, response) {
    request.on("data", function (data) {
      console.log("data", JSON.parse(data));
      response.statusCode = 200;
      response.end();
    });
}).listen(8080);

Now that our server is created and we're logging webhook requests, we just need to start it up. To do this, open up a terminal window and navigate to your project directory. Then, run the following command:

node server.js

Once your server is running, you can test it by making a webhook request to your endpoint. If everything is working properly, you should see the request body logged to the console.

To connect this webhook endpoint up with your UseCSV importer, you can use a free Cloudflare tunnel.

Start a Cloudflare tunnel:

cloudflared tunnel localhost:8080

If your Cloudflare commands are successful, you will get something like this:

2022-01-29T23:40:16Z INF Thank you for trying Cloudflare Tunnel. Doing so, without a Cloudflare account, is a quick way to experiment and try it out. However, be aware that these account-less Tunnels have no uptime guarantee. If you intend to use Tunnels in production you should use a pre-created named tunnel by following: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps
2022-01-29T23:40:16Z INF Requesting new quick Tunnel on trycloudflare.com...
2022-01-29T23:40:17Z INF +--------------------------------------------------------------------------------------------+
2022-01-29T23:40:17Z INF |  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
2022-01-29T23:40:17Z INF |  https://wan-attract-tin-exposure.trycloudflare.com                                        |
2022-01-29T23:40:17Z INF +--------------------------------------------------------------------------------------------+

Use the tunnel link and paste it into the Webhook URL field to finish connecting everything up.

05.png

We're ready to try your first import

Make sure your React.js server is running with npm run . Go to http://localhost:3000 and click on Import Data to open the importer modal.

Upload your CSV file, match the columns and then click import.

06.png

07.png

08.png

Watch your node.js console log for the webhook payload. UseCSV will automatically split up the webhooks into batches of 1,000 rows.

Here is an example of the payload:

{
  uploadId: 999,
  importerId: 'YOUR IMPORTER KEY',
  batch: { index: 1, count: 1, totalRows: 2 },
  user: null,
  metadata: null,
  rows: [
    { full_name: 'Jane Smith', review: 'A++++' },
    { full_name: 'Joe Blogs', review: 'Loved it' },
  ]
}

The rows array will contain the imported data with key-pair params being the setup you have in your Importer. The user object will contain any key-value pairs you passed to the corresponding user param in the UseCSV component.

Where to from here?

The possibilities are endless when it comes to using UseCSV. With UseCSV, you can evade common issues like incorrect data formatting, parse errors, and incomplete data.

When it comes to open source libraries, there are long-term potential security issues that your application may face, especially if it involves sensitive CSV data.

For more information about integrating UseCSV into your project, check out the documentation - or start using UseCSV today to experience how easy it is to get started.

Share this post