How to import CSV files in Vue.js with UseCSV

Guide

How to import CSV files in Vue.js with UseCSV

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 Vue.js app in just a few minutes with the help of UseCSV.

#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
  • 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

Add CSV import to your Vue.js app

Adding UseCSV to your Vue.js app is quite simple. All you have to do is install @usecsv/vuejs, import the plugin, and template the HTML to display the import button. Uploaded data can be sent to your app as a frontend callback or backend webhook.

Be sure to check out the @usecsv/vuejs docs here.

First we need to install the UseCSV Vue.js lib:

Using npm:

npm install @usecsv/vuejs

Using yarn:

yarn add @usecsv/vuejs

Now all you need to do is insert the import button with a template:

<template> <div id="app"> <h1>Start importing your data with UseCSV</h1> <usecsv-button importerKey="e3033735-73be-498a-9d3c-0a8b4c070e67" :user="{ userId: '12345' }" :onData="onData" > Import Data </usecsv-button> </div> </template> <script> import UseCSVButton from "@usecsv/vuejs"; export default { name: "App", components: { "usecsv-button": UseCSVButton }, methods: { onData: function (data) { console.log("Data:", data); }, }, }; </script>

There are a few things to note about the above code:

  • The importerKey connects your the UseCSV component to the data model you setup earlier.
  • 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 any key-pair values here.
  • By default UseCSV renders the Import Data button for you, but you can also render a custom button. Learn more in the docs here.

Load up http://localhost:3000 and you will see the Import Data button.

Receive data from imports

There are two ways to receive data imports. The first is via a webhook UseCSV sends to your backend. The second way is to keep the uploaded data local by passing an onData callback function to your UseCSV component.

For this tutorial, we are going to be using the onData callback method. For more information about using the webhook method, check out the documentation for it here.

You'll see in the code above we already included an onData callback function:

onData: function (data) { console.log("Data:", data); },

You can extend this function to save the data to your backend etc. Here's an example of the passed data format:

{ uploadId: 334, fileName: "data.csv", user: { userId: "12345" }, metadata: { anotherId: "1" }, rows:[ { first_name:"Mari", email:"Mari@gmail.com" }, { first_name:"John", email:"John@gmail.com" } ] }

We're ready to try your first import

Go to your localhost 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 browser console log for the onData callback.

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. Checkout the docs for more info.

Share this post