Guide

How to import CSV files in JavaScript with UseCSV

If you're dealing with data, you're going to come across CSV file formats at some point. CSV, or comma-separated values, is a type of file that separates data by commas. It's a common format for storing data, but dealing with CSV data can be difficult and full of errors.

This guide will show you how to easily import CSV files into JavaScript using UseCSV.

What is UseCSV?

UseCSV is our product for converting CSV data into JSON via webhook. It is designed to make it easy to get your data from one format to another. All you need to do is supply a CSV file and a webhook URL, and UseCSV will do the rest.

All you need is done for you and features include:

  • 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 JavaScript app

Adding CSV importing via JavaScript is as easy as installing the @usecsv/js package and then dropping it into your code. Here is a walkthrough on how to do this.

Step 1: Install @usecsv/js package to your project

To install and use UseCSV for your CSV importing needs, you need to install the JavaScript package. This can be achieved through npm, yarn, or via CDN.

For npm, simply use the following:

npm install @usecsv/js

For yarn, use the following:

yarn add @usecsv/js

For CDN:

<script src="https://unpkg.com/@usecsv/js/build/index.umd.js"></script>

Step 2: Drop the library into your project

The next step will help connect your JavaScript frontend to UseCSV and your import model.

The following steps will create an importButton and attach UseCSV library to your JavaScript frontend.

First, create the button in HTML. The import-data-button id lets you uniquely identify the specific DOM element you want to attach the importing functionality to.

... <button type="button" id="import-data-button">Import Data</button> ...

To initialize and set up UseCSV's JavaScript library for CSV importing, here is a sample code snippet that you can use. This will attach UseCSV's modal to the import-data-button DOM element and perform the necessary actions required to get your user's data to UseCSV.

var importButton = document.getElementById("import-data-button"); importButton.onclick = function () { useCsvPlugin({ importerKey: "your-importer-key", user: { userId: "12345" }, metadata: { anotherId: "1" } }); };

There are three parameters available. Here is a breakdown of what they are and what they do.

  • importerKey: this is a string value that is available in the admin panel of your UseCSV import model.
  • user: this value contains the details of your importing user. It is an optional parameter and can be useful for quickly identifying details about who is using the CSV importer.
  • metadata: This parameter allows you to attach an object containing any additional details you want about the CSV import. The parameters inside this object can be anything you want.

That's basically it for the JavaScript integration side for CSV importing. When you click on your import button, it should pop up a working modal.

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

A web server is a computer system that processes requests via HTTP, the basic network protocol used to distribute information on the World Wide Web. The most common use case for a web server is to host a website, but a web server can also be used to process other HTTP requests, such as for web API calls.

In order to create a simple web server endpoint in JavaScript, we will need to use the built-in HTTP module. This module provides a way of creating an HTTP server that can respond to requests from a web browser or other HTTP client.

In this portion of the walkthrough, we are going to create a simple JavaScript server in Node.js.

The first thing we need to do is create a file called server.js and import the HTTP module:

var http = require('http');

Next, we need to create a server object. We'll set it to listen on port 8080.

const server = http.createServer();

Now that we have a server object, we can specify what should happen when the server receives a request. In this case, we will just log the request to the console:

server.on("request", (request, response) => { request.on("data", function (data) { console.log("data", JSON.parse(data)); }); response.statusCode = 200; response.end(); });

Finally, we need to start the server so that it will begin listening for requests:

server.listen(8080); // server will listen on port 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

Go back to your JavaScript app 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.

Where to from here?

UseCSV is a powerful open-source library that makes it easy to work with CSV data. With UseCSV, you can avoid common problems like incorrect data formatting, parse errors, and incomplete data.

UseCSV is also a great choice for security and long-term stability, as it is regularly updated with the latest security patches.

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