How to import CSV files in Budibase

How to Import CSV Files in Budibase Using CSVBox

Developers building internal tools with Budibase often need to upload spreadsheet data for use in databases and dashboards. However, Budibase doesn’t offer a native CSV upload feature. This guide shows how to quickly integrate robust CSV import functionality into any Budibase application using CSVBox—a plug-and-play widget purpose-built for spreadsheet ingestion.

Ideal for SaaS developers, full-stack engineers, and internal tooling teams, this tutorial walks through how to embed CSVBox in your Budibase app, validate user data, and capture imports via your app’s backend.

Why Add CSV Import to Budibase?

While Budibase excels at app building—with a built-in database, external API support, and drag-and-drop UI—it lacks an out-of-the-box interface for uploading CSVs.

Common use cases include:

• Admin panels needing customer bulk uploads
• CRM systems requiring lead ingestion
• SaaS portals allowing non-technical users to import lists or records

Challenges without a built-in CSV importer:

• No upload UI available in the default component set
• File parsing and schema validation must be coded manually
• Handling malformed data or missing rows adds complexity

🟢 Solution: CSVBox solves these issues with:

• A ready-made upload widget
• Configurable schema validation
• On-data JavaScript callback for custom logic
• Secure handling and webhook support

Step-by-Step: Add CSV Importing to Budibase

Prerequisites

Ensure you have the following ready:

• A deployed Budibase app (cloud or self-hosted)
• Familiarity with Budibase’s “Custom Component” feature
• A widget created at CSVBox.io with client credentials

Step 1: Create a Widget in CSVBox

1. Sign into CSVBox.
2. Create a new widget and define your column schema (e.g., name, email, phone).
3. CSVBox will give you:
   • A client_key
   • A widget_hash

These credentials authenticate and load the upload widget into your Budibase app.

Step 2: Embed Widget in Budibase via Custom Component

Use Budibase’s custom component to inject HTML/JavaScript.

1. Open your Budibase app design.
2. Navigate to the desired screen.
3. Add a new “Custom Component”.
4. Paste the following snippet inside the component:

<!-- Load CSVBox SDK -->
<script src="https://js.csvbox.io/0.2/csvbox.js"></script>

<!-- Import button -->
<button id="csvbox-launcher">Import CSV</button>

<script>
  window.addEventListener('load', function () {
    const importer = new CSVBox("YOUR_CLIENT_KEY", {
      widgetHash: "YOUR_WIDGET_HASH",
      user: {
        id: "user_123",
        name: "Alice Doe"
      },
      onData: function (data) {
        console.log("CSVBox Data:", data);

        fetch('https://your-api-endpoint.com/data-import', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(data)
        });
      }
    });

    document.getElementById("csvbox-launcher").addEventListener('click', function () {
      importer.open();
    });
  });
</script>

Make sure to replace:

• "YOUR_CLIENT_KEY" and "YOUR_WIDGET_HASH" with your real credentials from CSVBox
• The fetch() URL with your Budibase endpoint that will handle incoming data

Step 3: Handle Imported Data in Budibase

Budibase supports internal API endpoints via automation scripts.

Here’s an example endpoint to receive and store parsed CSV data:

// POST /data-import

exports.handler = async function (event) {
  const body = JSON.parse(event.body);

  for (const row of body.data) {
    await budibase.db.insert('contacts', {
      name: row.name,
      email: row.email,
      phone: row.phone
    });
  }

  return {
    statusCode: 200,
    body: JSON.stringify({ success: true })
  };
};

Requirements:

• Your Budibase app should have an internal table called contacts
• Adjust field mappings (row.name, etc.) to match your schema

Key Integration Elements

Import Button

<button id="csvbox-launch">Import Customers</button>

This button launches the upload modal.

Widget Initialization

new CSVBox("client_key", {
  widgetHash: "widget_hash",
  onData: function (data) {
    // handle data
  }
});

Fields:

• client_key and widget_hash identify your widget
• onData() runs after successful import and passes array of data rows

Data Submission

fetch('/data-import', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify(data)
});

This sends imported data to Budibase’s backend for storage in internal collections.

Troubleshooting: Common Issues

CSV upload modal not appearing?

• Make sure the CSVBox CDN <script> is included
• Check browser console for errors

Data not received?

• Validate widget schema matches uploaded file headers
• Log output in onData() to inspect parsed payload
• Confirm Budibase endpoint is reachable and accepts POST requests

CORS or HTTP error?

• If sending to an external endpoint, confirm CORS settings
• Use Budibase internal endpoints or disable auth for testing

Why Use CSVBox for Budibase CSV Uploads?

CSVBox is optimized for hassle-free spreadsheet ingestion:

Unlike parsing CSVs with JavaScript or back-end logic, CSVBox eliminates the need to:

• Use third-party parsing libraries (like PapaParse)
• Handle file validation manually
• Code data mapping and sanity checks from scratch

Summary: Add Powerful CSV Upload to Budibase in Minutes

To enable CSV upload in Budibase:

1. Configure a schema-based widget with CSVBox
2. Embed script and button in a Budibase “Custom Component”
3. Capture imported data via internal APIs or automation endpoints

This enables a seamless user workflow—ideal for B2B SaaS platforms, admin tools, CRM systems, and more.

📘 Learn more about advanced options in the CSVBox Integration Docs

—

By giving users an easy way to import spreadsheets, you enhance app usability, reduce support overhead, and build data-driven features faster—all with minimal code.

👉 Visit CSVBox.io to get started for free.