Guide

How to import CSV files in Angular with UseCSV

CSV is everywhere. It's in marketing, sales, finance, customer service, and operations. Where there is data, there is a high chance that CSV is also present in some form.

While CSV as a format is fantastic for Excel users and analysts, it is not as beloved by software developers. Dealing with CSV imports can be a pain. From character encoding issues to slow processing speeds.

CSV as a data format is old, full of quirks and inconsistencies. Here are a few common reasons why CSV and rapid software developer do not mix well.

  • CSV files are often not well structured, making it hard to parse and interpret data
  • can be large, making them difficult to manage and process
  • can be prone to errors, making it difficult to trust data

If you're an Angular developer looking to integrate CSV importing into your app, this is where UseCSV comes in.

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.

Building your own CSV file importing tool from scratch can also be time-consuming. Here is a list of features and benefits of using UseCSV:

  • gives the ability to "drop-in" code via library import. You can easily connect it to UseCSV platform and data is processed and sent to your receiving endpoint via webhook
  • secure and compliant to ensure that your data is safe
  • ability to handle large file imports and provide data streaming for increased speed
  • comes with a validation library and user-friendly UI

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 Angular app

Adding CSV importing to your Angular app is an easy three-step process. All you have to do is install the @usecsv/angular package, create your import button, and then set the parameters to connect your Angular app up to your import model.

Without further ado, let's get started!

Step 1: Add @usecsv/angular to your Angular app

To add CSV importing with UseCSV for Angular, you need to install @usecsv/angular package to your project. You can do this either through npm or yarn.

For example, to install using npm, run the following in your console:

npm install @usecsv/angular

To install using YARN, you can run the following:

yarn add @usecsv/angular

Now, import UsecsvAngularPluginModule to your Angular's module file, commonly located at app.module.ts. Here is a code snippet of what it looks like:

import { UsecsvAngularPluginModule } from '@usecsv/angular'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, UsecsvAngularPluginModule], providers: [], bootstrap: [AppComponent], })

Once that is completed, you can now start using UseCSV import in your Angular app.

Step 2: Import @usecsv/angular to your component

The next step is to add @usecsv/angular to your component.

If you are creating a new component, can do this via the Angular CLI. The Angular CLI is a great tool for scaffolding and building Angular applications. It can be used to generate components, services, pipes, directives, and many other things. Here is an example of the command:

ng generate component csv-importer-component

The generated component will have a basic template, stylesheet, and TypeScript file. These files are located inside the src/app directory. We can modify these files to suit our needs.

To add UseCSV to Angular for CSV importing, you will need to import UsecsvAngularPluginModule to your component. Here is an example of how to do this:

import { Component } from "@angular/core"; import { UsecsvAngularPluginModule } from "@usecsv/angular"; @Component({ selector: "my-component", templateUrl: "./csv-importer-component.html", styleUrls: ["./csv-importer-component.css"] }) export class MyComponent {}

Step 3: Template your import button

All that's left is to create the button that will launch the CSV importer modal. Here is how to template your CSV import button.

<usecsv-button importerKey="your-importer-key" user={{ userObjectHere }}> Import Data </usecsv-button>

The usecsv-button takes two parameters that is passed with your CSV import data. Here is a breakdown of what they do:

  • importerKey: the importer key identifies and connects to the specific CSV importer you want to target for this specific button.
  • user: this is an object that can contain details about the importing user.

When you check your localhost and click on the button, the CSV import modal will appear.

Receive data from imports

Since Angular is a front-end framework, we will need something else to receive the CSV import. For this portion of the tutorial, we are going to create a simple Node.js webserver.

A Node.js web server is a simple way to receive data from clients. It can be used to process data from forms, handle file uploads, or even act as a simple web API. To create a Node.js web server, we need to use the built-in http module.

Here is a simple example that creates a Node.js web server that responds to all requests with the text "Your import works!".

Start by creating a server.js file in your chosen directory with the following code:

var http = require("http"); http .createServer(function (request, response) { response.writeHead(200, { "Content-Type": "text/plain" }); response.end("Hello, world!"); }) .listen(8080); console.log("Server running at http://localhost:8080/");

The http module provides a number of methods for creating a server, but we will use the createServer method. This method takes a callback function that will be called when a client makes a request to the server. The callback function will be passed a request and a response object.

The request object contains information about the client's request, such as the URL, headers, and body. The response object is used to send data back to the client. We can use the response.writeHead method to set the HTTP status code and response headers, and the response.end method to send the response body.

Now that your code is ready, you can run your server by using the following command:

node server.js

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 Angular server is running. Go to the frontend 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?

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

UseCSV is also a great choice for security since it is an open-source library. This means that there are no 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