How to import CSV files in Serverless Stack (SST)

5 min read
Learn how to build a CSV import feature in Serverless Stack (SST). Step-by-step guide for developers integrating spreadsheet uploads in SaaS applications.

How to Import CSV Files into a Serverless Stack (SST) App Using CSVBox

If you’re building a serverless app with SST and need to upload and process CSV data—like customer lists, inventory updates, or transaction records—this guide shows you how to implement a production-ready CSV import workflow using CSVBox.

This solution streamlines spreadsheet data handling in SST by combining:

  • A React-based CSV import UI via the CSVBox widget
  • A scalable backend that receives CSV data via AWS Lambda webhooks

Ideal for full-stack developers, SaaS teams, and engineers who want a secure, no-fuss bulk import experience without building custom upload and parsing logic from scratch.

Why CSV Import is Tricky in Serverless Applications

Serverless frameworks like Serverless Stack (SST) are powerful for creating AWS-native apps, but handling file uploads—especially spreadsheets—can get complicated due to:

  • Stateless Lambda functions lacking persistent file storage
  • Complexity around handling multipart/form-data uploads
  • The need for object storage like Amazon S3 to handle file persistence
  • Custom-built CSV parsers, data mappers, and validation logic

Instead of reinventing the wheel, tools like CSVBox provide a prebuilt CSV import UI and validation pipeline—sending clean structured data directly to your backend via webhook.

What You’ll Build

We’ll walk through how to:

  1. Configure a CSVBox import widget to match your data schema
  2. Create an SST Lambda API route to receive the CSV data
  3. Embed a CSV uploader in a React-based frontend

By the end, you’ll have a dynamic CSV import workflow that’s fully serverless, secure, and scalable.

Prerequisites

To follow along, you’ll need:

  • A Serverless Stack (SST) v2 app with a React frontend
  • Basic knowledge of AWS Lambda and REST endpoints
  • A free CSVBox account

This setup is perfect for SaaS projects needing clean external data ingestion, such as user lists, sales orders, CRM data, or external platform exports.

Step 1: Configure a CSVBox Widget

First, create a CSV import template in CSVBox:

  1. Go to your CSVBox Dashboard
  2. Navigate to → Widget → Create Widget
  3. Map relevant fields (e.g., Name, Email, Phone)
  4. In the webhook URL box, leave a placeholder—we’ll replace with a live SST endpoint later
  5. Save the widget and note down:
    • license_key
    • client_uuid

These credentials are needed to embed the widget in your frontend.

Step 2: Set Up the Webhook Endpoint in SST

CSVBox sends imported CSV data via webhook—your backend will need to receive and handle this.

Create an SST Project

If you haven’t already, create a new SST app:

npx create-sst@latest csv-import-sst
cd csv-import-sst

Define the API Route

Edit stacks/MyStack.ts:

import { StackContext, Api } from "sst/constructs";

export function MyStack({ stack }: StackContext) {
  const api = new Api(stack, "Api", {
    routes: {
      "POST /import-webhook": "packages/functions/src/importWebhook.main",
    },
  });

  stack.addOutputs({
    ApiEndpoint: api.url,
  });
}

Write the Lambda Handler

Create packages/functions/src/importWebhook.ts:

import { APIGatewayProxyHandler } from "aws-lambda";

export const main: APIGatewayProxyHandler = async (event) => {
  try {
    const body = JSON.parse(event.body || '{}');
    console.log("Received CSV Data:", body.data); // Use as needed

    return {
      statusCode: 200,
      body: JSON.stringify({ status: "success" }),
    };
  } catch (err) {
    console.error("Error processing webhook:", err);
    return {
      statusCode: 400,
      body: JSON.stringify({ error: "Invalid payload" }),
    };
  }
};

Deploy and Get the Webhook URL

Deploy your app:

npx sst deploy

The output will include an ApiEndpoint. Use this as the webhook URL in your CSVBox widget.

Example: https://abcd1234.execute-api.region.amazonaws.com/import-webhook

Paste it back into your CSVBox widget settings.

Step 3: Add CSV Import to Your React Frontend

Make it easy for users to import CSV files directly in your UI.

Install CSVBox React Library

From the frontend directory of your SST app:

npm install --save csvbox-react

Create a CSV Uploader Component

Create components/CSVUploader.tsx:

import React from "react";
import { CSVBox } from "csvbox-react";

const CSVUploader = () => {
  return (
    <div>
      <h3>Import CSV</h3>
      <CSVBox
        licenseKey="your_license_key_here"
        clientUuid="your_client_uuid"
        user={{
          user_id: "123",
          name: "Test User",
          email: "[email protected]",
        }}
        onImport={(summary) => {
          console.log("Import Summary:", summary);
        }}
      />
    </div>
  );
};

export default CSVUploader;

Use the Component in a Page

Edit pages/index.tsx:

import CSVUploader from "../components/CSVUploader";

export default function Home() {
  return (
    <div>
      <h1>CSV Import Page</h1>
      <CSVUploader />
    </div>
  );
}

Run your frontend:

npm run dev

Now users can upload CSV files through your frontend, and the formatted data is delivered to your Lambda webhook.

Example Folder Structure

A working SST + CSVBox project might look like this:

csv-import-sst/
├── apps/
│   └── web/
│       └── pages/
│       └── components/
│           └── CSVUploader.tsx
├── packages/
│   └── functions/
│       └── src/
│           └── importWebhook.ts
├── stacks/
│   └── MyStack.ts

Common CSV Import FAQs and Troubleshooting

📡 Why isn’t my webhook triggering?

  • Double-check that the webhook URL is HTTPS and matches your deployed SST endpoint
  • Enable Webhook Debug Mode in CSVBox under Settings > Developer
  • Inspect Lambda logs via SST Console or AWS CloudWatch

🔁 Duplicate or unexpected CSV rows?

  • Confirm you’ve set proper column mappings and unique row identifiers in the widget
  • Validate the webhook payload structure—CSVBox includes data, meta, and summary

❌ CORS errors in your React UI?

  • The CSVBox widget runs in its own iframe and doesn’t require CORS headers
  • Webhooks communicate entirely server-to-server—frontend origin doesn’t matter

What Makes CSVBox Ideal for Serverless Data Import?

CSVBox handles the entire CSV upload lifecycle for you:

  • ✅ Drag-and-drop CSV or Excel upload interface
  • ✅ User-friendly column mapping and dynamic field validation
  • ✅ Real-time error feedback before submission
  • ✅ Backend webhook delivery of clean, structured JSON
  • ✅ Field templates (e.g. string, number, enum, required)
  • ✅ White-label support (logos, themes, CSS)

Pairing CSVBox with SST gives your app seamless spreadsheet import workflows, even in fully serverless environments—no need for S3, file parsing, or retry logic.

For full documentation, see the CSVBox Help Center.

Next Steps

With your CSV import pipeline live, consider adding:

  • ✅ Validation logic in importWebhook.ts to enforce data integrity
  • ✅ Use DynamoDB, PostgreSQL, or another data store to persist uploads
  • ✅ Configure SST Secrets to securely manage CSVBox API credentials
  • ✅ Use templates inside CSVBox to enforce field types and validation rules

Resources

With CSVBox and SST, importing spreadsheet data is no longer a challenge—it’s a feature you can ship in hours, not weeks.

#frameworks

Related Posts