Import CSV data to Supabase from a Lovable app

TL;DR: Paste this prompt into Lovable:

Add a CSV import feature that saves data directly to my Supabase database. Install @importcsv/react and zod. Create an importer that opens as a modal, maps columns to name (required), email (required), and company (optional), validates all rows, then inserts the data into my contacts table. Show a success toast with the row count.

Your users can now upload spreadsheets that land directly in your Supabase table.

The problem: Supabase CSV import is admin-only

Supabase has a built-in CSV import feature. It works fine when you need to upload data through the dashboard. But what about your users?

Here is the limitation: Supabase dashboard import is designed for database administrators, not app users. Your customers cannot access your Supabase dashboard to import their contacts, products, or inventory.

What happens when you need user-facing CSV import:

Dashboard import requires admin access
100MB file size limit
Columns must match the table exactly (no mapping)
No data validation before it hits your database
Errors appear after the import fails

You built your app in Lovable so your users could self-serve. CSV import should work the same way.

The solution: User-facing CSV to Supabase

ImportCSV gives your app users a proper import experience - file upload, column mapping, validation - and the data flows directly into your Supabase table.

Here is the complete flow:

User clicks "Import" in your Lovable app
ImportCSV modal opens with drag-and-drop upload
User maps their spreadsheet columns to your fields
ImportCSV validates every row before import
User fixes any errors inline
Validated data inserts into your Supabase table

No dashboard access. No admin privileges. Your users handle their own data.

The prompt

Copy this and paste it into Lovable:

Add a CSV import feature that saves data directly to my Supabase database.

Install these packages:
- @importcsv/react
- zod

Create a CSV importer that:
1. Opens as a modal when users click "Import Contacts"
2. Accepts CSV or Excel files
3. Maps columns to: name (required), email (required email format), company (optional)
4. Validates all data before importing
5. On complete, inserts the validated data into my "contacts" Supabase table
6. Shows a success toast with the number of imported rows

Use this validation schema:
const contactSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email'),
  company: z.string().optional()
});

After import completes, call:
const { error } = await supabase.from('contacts').insert(data);

Style the import button to match my app's existing design.

Lovable generates everything: the button, the modal, the validation, and the Supabase insert.

What Lovable generates

When you paste that prompt, Lovable creates code that looks like this:

import { CSVImporter } from '@importcsv/react';
import { z } from 'zod';
import { supabase } from '@/integrations/supabase/client';
import { toast } from 'sonner';

const contactSchema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
  company: z.string().optional()
});

const handleImportComplete = async (data) => {
  const { error } = await supabase
    .from('contacts')
    .insert(data);

  if (error) {
    toast.error('Import failed: ' + error.message);
  } else {
    toast.success(`Imported ${data.length} contacts`);
  }
};

You do not need to write this yourself. Lovable handles it. The code is here so you understand what is happening behind the scenes.

Step-by-step setup

Step 1: Connect Supabase to your Lovable project

Your Lovable project needs a Supabase connection. If you have not set this up yet:

Open your Lovable project settings
Go to Integrations > Supabase
Click "Connect Supabase"
Sign in and authorize Lovable
Select or create a Supabase project

Wait for the confirmation message in chat: "Supabase connected."

This also works with Lovable Cloud, which is built on the Supabase foundation.

Step 2: Create your target table

The data needs somewhere to go. If your contacts table does not exist, ask Lovable to create it first:

Create a Supabase table called contacts with these columns:
- id (auto-generated)
- name (text, required)
- email (text, required)
- company (text, optional)
- created_at (auto-generated timestamp)

Step 3: Paste the import prompt

Now paste the CSV import prompt from above. Lovable will:

Install @importcsv/react and zod packages
Create an "Import Contacts" button
Build the modal with file upload
Add column mapping for name, email, company
Connect the import to your contacts table
Add success and error feedback

Step 4: Test in preview

Click preview and try uploading a test spreadsheet. You should see:

The import button in your app
A modal when you click it
Drag-and-drop file upload
Column mapping screen
Validation results for each row
Success message with row count

Step 5: Verify in Supabase

After a successful import, open your Supabase dashboard. Navigate to Table Editor > contacts. Your imported data is there.

Dashboard import vs. in-app import

Feature	Supabase Dashboard	ImportCSV in Your App
Who can use it	Admins only	Any app user
File size	100MB limit	Chunked uploads for large files
Column matching	Must match exactly	Visual column mapper
Data validation	None before import	Validates every row
Error handling	Fails after import	Fix errors before import
User experience	Technical	Designed for end users

Adapting for other data types

The contacts prompt is a starting point. Modify it for whatever your app needs:

For products:

Add a product CSV import to my Lovable app. Use @importcsv/react. Map columns to product_name (required), price (required number), sku (required), and category (optional). Insert into my Supabase products table. Show feedback on success or failure.

For orders:

Add an order import feature using @importcsv/react. Let users upload CSV files with order_id, customer_email, amount, and status. Validate that amount is a positive number. Insert into my Supabase orders table.

For inventory:

Add inventory CSV import with @importcsv/react. Map columns to item_name, quantity (required number), warehouse_location. Insert into my Supabase inventory table. Show a count of imported items.

FAQ

Does this work with Lovable Cloud?

Yes. Lovable Cloud is built on Supabase's open-source foundation. The same import pattern works whether you use Lovable Cloud or connect your own Supabase project.

Do I need to create the table before importing?

Yes. The Supabase table must exist before users can import data into it. Ask Lovable to create the table first, or set it up manually in the Supabase dashboard.

What if my users' column names are different?

ImportCSV shows a column mapping screen where users match their spreadsheet columns to your fields. If their file has "Full Name" instead of "name," they can map it manually.

How big a file can users import?

ImportCSV handles files with thousands of rows. Large files are processed in chunks so the browser stays responsive.

Is the data validated before it reaches Supabase?

Yes. The Zod validation runs on every row before the insert. Invalid rows are highlighted so users can fix them. Only valid data reaches your database.

What happens if the Supabase insert fails?

If the insert fails (network error, permission issue, etc.), the user sees an error message. No partial data is inserted. They can retry after the issue is resolved.

Can I validate more than basic types?

Yes. Zod supports complex validation: email format, number ranges, regex patterns, custom rules. Describe what you need in the prompt and Lovable will add the validation.

Ready to let your users import directly to Supabase? Get started with ImportCSV - paste the prompt above and your import feature is live.