How to import CSV files in Ruby on Rails via JavaScript with UseCSV

Guide

How to import CSV files in Ruby on Rails with UseCSV

#How to import CSV in Ruby on Rails using UseCSV

CSV is an old data format with a lot of quirks and inconsistencies, making it difficult to parse and interpret data. CSV files can also be large and difficult to manage, and are prone to errors, making it difficult to trust data.

UseCSV makes it easy to import CSV files into your Rails application, so you can focus on developing your app, not reinventing the wheel.

What is UseCSV?

UseCSV is our complete data import solution for your application. By integrating the UseCSV frontend library, your users will get a delightful CSV/Excel data import experience. Uploaded data is then sent your application backend via a webhook (or you can even get the data directly in your frontend via a callback),

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

Our features include:

  • Validation rule library
  • Handle large import files with ease
  • Receive imported data as a webhook or callback
  • Automatic smart column matching
  • Delightful frontend CSV import experience for your users

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. Once completed, you will be automatically directed to UseCSV dashboard.

This dashboard will give you an overview of your 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 'Enable Webhook & Save Data' toggle - this lets you toggle between sending CSV content for us to process or, for security, compliance, or your own technical reasons, process the data on your own servers using UseCSV. When toggled off, only the metadata is sent to UseCSV. The contents of the uploaded file will not be sent.
  • 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 Rails app

Generating your Rails app

If you don't have an existing Rails app, create a new Rails app using the following command:

rails new myapp
cd myapp

Including the UseCSV frontend JS library using importmap

Including the UseCSV JS library into your Rails front end is just like importing any JS lib. If you're using importmap-rails, simply run:

bin/importmap pin @usecsv/js

Then, import the package into application.js and add our helper function (you may be using jQuery or similar here instead of the onclick):

import useCsvPlugin from "@usecsv/js" function importData(){ useCsvPlugin({ importerKey: "your-importer-key", user: { userId: "12345" }, metadata: { anotherId: "1" }, }); } window.importData = importData

Now you can add UseCSV button for the modal popup in your view:

<button type="button" id="import-data-button" onclick="importData()"> Import Data </button>

Including the UseCSV frontend JS library using a script tag

Alternatively if you don't want to use importmap you can simply use a script tag (see the docs. In your <head> add:

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

Then you can create an onclick importData() helper function like about, using whichever frontend framework you're using. There's an example in our docs.

Creating a controller in Rails to receive webhook

Now create a controller to receive the UserCSV webhook. In your routes file (config/routes.rb), add a route for the webhook endpoint:

post '/webhook/import' => 'webhook#import'

Next, create the webhook controller (app/controllers/webhook_controller.rb):

class WebhookController < ApplicationController skip_before_action :verify_authenticity_token def import webhook_data = JSON.parse(request.body.read) # do something with webhook_data logger.info webhook_data respond_to do |format| format.json { } end end end

This action will parse the JSON from the request body and store it in the webhook_data variable. You can then do whatever you want with that data, such as save it to a database or process it in some way.

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

Launch the Cloudflare tunnel:

cloudflared tunnel localhost:3000

Copy the tunnel url cloudflared generates, then append on your new webhook endpoint path /webhook/import and paste the complete Webhook URL into the UseCSV admin to finish connecting everything up. Webhook URL

We're ready to try your first import

Make sure your Rails app is running. Go to http://localhost:3000 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 Rails console log for the webhook payload. UseCSV will automatically split up the webhooks into batches of 1,000 rows.

Where to from here?

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