Add CSV import to your Node.js app using UseCSV

Feb 15, 2022

Importing CSV and Excel files is a feature everyone has to build eventually. Whilst there are a handful of CSV parser libraries out there, you're left to build the UI yourself. We're going to show you how to add CSV file import with a delightful UI to your Node.js app in just a few minutes.

What is UseCSV?

UseCSV is an all-in-one CSV import product that gives you a delightful CSV importer experience for your users. All you have to do is drop-in the UseCSV JS library, and create a webhook endpoint to receive uploads. This takes away all the headaches of building CSV import functionality in-house .

Here's a sneak peak of what the import experience will be for your users (this opens in a modal inside your app):

Here are just a few of the awesome features of UseCSV:

  • Frontend libraries which add the UseCSV import button and modal to your app
  • Receive imported data as a webhook or callback
  • Automatic smart column matching
  • Supports CSV and all Excel formats (xlsx, xls, xlt), including legacy Excel versions
  • Handles large import files
  • Includes a library of common validation rules to choose from

Without further ado, let's get started!

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 the 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.

UseCSV-admin-home

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 an importer already created for you called 'My First Importer'. Click View to configure visit the importer settings:

UseCSV-admin-my-first-importer

Head down to the Column section, where you can setup the data model for this importer.

UseCSV-admin-columns.png

Click Add Column to create a new column, for example you could add a first_name column to begin with. Create as many columns as you like.

UseCSV-admin-add-column.png

Adding UseCSV to your frontend

UseCSV includes JS libraries for all popular frontend frameworks. See the docs for more details.

For example, if you're using React with your Node app, here's how you would include the UseCSV React library:

npm install @usecsv/react

Or, if you prefer to use Yarn:

yarn add @usecsv/react

Render the UseCSV component in your app. Here is an example of what it looks like:

import UseCSV from "@usecsv/react"; const App = () => { return ( <div> <h1>Start importing your data</h1> <UseCSV importerKey="your-importer-key" user={{ userId: "12345" }}> Import Data </UseCSV> </div> ); }; export default App;

There are two props available for UseCSV:

  • importerKey - this is a string and connects your frontend to importer. You can store this value as an .env for security reasons. This key is available in the admin panel of your importer.
  • user - this is a JSON object that can be used to pass additional data to the webhook and is relayed to the backend.

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 local webhook endpoint up with your UseCSV importer for testing in development, 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 Node.js server is running. 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?

UseCSV makes it simple to add delightful CSV import to your app. There are many powerful features under the hood including themes and validation rules. Check out the docs for more info.

Add CSV Import To Your App

Get Started free and start integrating UseCSV today

Add CSV Import To Your App

Get Started free

and start integrating UseCSV today

Add CSV Import To Your App

Get Started free

and start integrating UseCSV today