Add CSV file import to Remix with UseCSV

Apr 27, 2022

Remix is an exciting new React based framework that gives you the best of React but rendered server side. 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 Remix 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!

Setup your UseCSV account

You'll want to first grab a free UseCSV developer account. Once you've signed up and logged in, you'll see an Importer called "My First Importer" which has already been created for you.

Click the View button. Here you can configure your Importer. Note the Key and Webhook URL fields, we'll need these later on.

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

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.

Add CSV import to your Remix app

Now your UseCSV Importer is setup, it's time to create a basic Remix project and integrate UseCSV.

First create a basic Remix project.

npx create-remix usecsv-remix-example
cd usecsv-remix-example

Then install the UseCSV React library.

npm i @usecsv/react

Let's add the UseCSV React component to our app now. Edit app/routes/index.tsx, import @usecsv/react and then add the UseCSV component into the page. You'll also need insert your actual importerKey, which can be found by going to the Importer in your UseCSV dashboard.

import UseCSV from "@usecsv/react";

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>UseCSV in Remix Example</h1>
      {typeof document !== "undefined" && (
        <UseCSV
          importerKey="INSERT YOUR IMPORTER KEY HERE"
          user={{ userId: "yourUserId" }}
        >
          Import Data
        </UseCSV>
      )}
    </div>
  );
}

The user param us a JSON object that can be used to pass additional data which is included in the import. This is especially useful when you need to match up which user in your app an upload comes from. You can use any key-value pairs you like.

Launch the Remix server with npm run dev and visit http://localhost:3000. Your app will now have a fancy Import Data button.

Receive data from imports

When a user imports data, UseCSV can send it to your app in two ways. The first is via a webhook. You set a Webhook URL in your Importer which UseCSV will make a POST request to, including the data in a JSON body. You can read more about the UseCSV webhook format in our docs.

Alternatively, if you want to keep uploaded data local or handle saving it in your frontend, you can pass an onData callback function to the UseCSV component. You can read more about the UseCSV onData callback in our docs.

For this tutorial we are going to be using the webhook.

Add the webhook endpoint

We need to create a webhook API Resource Route which UseCSV will call with the uploaded data. Create a new file /app/routes/webhook.tsx.

import { json } from "@remix-run/node";

export async function action({ request }) {
  const body = await request.json();
  console.log(body);
  // Save the imported rows in body to your database here
  return json({});
}

For the webhook request to reach localhost:3000 whilst we're developing, we need to setup a tunnel. You can use cloudflared to setup a free tunnel to localhost. Run cloudflared tunnel --url http://127.0.0.1:3000 then copy the unique url it outputs. Add on the path of the new Remix API Resource Route we just created /webhook and set the Webhook URL in your Importer in your UseCSV admin to this. E.g. https://hollow-errors-das-send.trycloudflare.com/webhook

We're ready to try your first import!

Make sure your Next.js server is running with npm run dev. Goto http://localhost:3000, click Import Data to open the Importer modal, upload a CSV file (you can download an auto generated sample .csv on the first step), match the columns and then click Import.

Watch your Next.js app console for the log of the webhook payload. UseCSV will automatically split up the webhooks into batches of 1,000 rows. The rows array will contain the imported data with the columns you setup in your Importer. The user object will contain any key-value pairs you passed to the corresponding user param in the UseCSV component.

{
  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' },
  ]
}
POST /webhook 200 - - 7.952 ms