The embedded CSV importer your users can finish on their own

What is an embeddable CSV importer?

An embeddable CSV importer is a ready-made component you drop into your own web application so your users can upload spreadsheets without your team building the import flow. It parses the file, matches the user's columns to your data model, flags invalid values, and lets the user fix them before anything reaches your database. Your application receives clean, structured data instead of a raw file.

How the embedded CSV importer works for your users

Your user clicks a button in your product and a guided importer opens on top of the page. It walks them through five steps, and each one removes a reason they would otherwise email your support team.

Upload. They drop in a CSV, TSV, TXT, XLS, XLSX, or XML file. Older spreadsheet formats can be supported on request. If they have no file, they can paste rows straight from a spreadsheet or type them in.

Set header. Real exports often start with a title row, a date stamp, or a blank line. The user points to the row that holds the column names, so the rest of the import reads the file correctly.

Match columns. Dromo suggests which of your fields each of their columns belongs to, using AI to catch matches a string comparison would miss, like "Ph#" for phone or "E-mail Addr" for email. The user confirms each suggestion or picks a different field. With mapping memory turned on, the next import of the same type is matched automatically.

Bulk fix. Before anyone edits a single cell, Dromo's AI proposes fixes for whole columns at once. Dates written as 21.1.2024 are converted to your format, with every before and after value shown. Free-text values like "demoo", "show product", and "under contract" are matched to your allowed options. The user reviews each change and can undo it.

Review and edit. The data appears in a spreadsheet-style grid with every problem highlighted inline, next to the cell that caused it, and an error count on each column. Users show only the rows with errors, step through them one at a time in the error navigator, or use find and replace, then fix values in place.

If they try to finish with problems left, Dromo tells them exactly how many rows would be discarded and offers the whole file as an XLSX download. They can fix it offline in Excel and upload it again, and Dromo picks up where they left off.

When they finish, your onResults callback receives clean JSON that matches your schema exactly, along with metadata about the import.

Add an embeddable CSV and Excel importer to React, Angular, or JavaScript

Setup is one package and one component, about ten lines of code, so it can be running in development the same day. Pass a frontend license key, the fields you expect, and a callback for the results:

import DromoUploader from "dromo-uploader-react";

<DromoUploader
  licenseKey="YOUR_FRONTEND_LICENSE_KEY"
  fields={[
    { label: "Name", key: "name" },
    { label: "Email", key: "email_address" },
  ]}
  settings={{ importIdentifier: "Contacts", developmentMode: true }}
  user={{ id: "user_123" }}
  onResults={(response, metadata) => saveContacts(response)}
>
  Import contacts
</DromoUploader>

That renders a button that opens the importer. To launch it from your own interface instead, leave out the children and control the boolean open prop from component state, with onCancel to handle the user closing it. In Next.js, render it inside a client component marked 'use client'.

Your application never handles the raw file, only the validated rows. The sandbox account is free, needs no credit card, and imports run in development mode are not charged, so the whole integration can be built and tested before anyone signs a contract.

There are packages for React, Angular, and vanilla JavaScript, and Next.js uses the React package. Each page covers setup and the pitfalls specific to that framework. For the same view by industry, see all use cases.

What you would have to build yourself

Most teams start by building their own importer. A file input and a basic CSV parser come together quickly. Everything below is what the first real customer file demands after that.

None of it is your core product, and all of it needs maintaining as customers find new ways to break a spreadsheet. Dromo Professional starts at $599 per month with 250 imports included and $3 per import after that, and it covers everything on this page except the features marked Enterprise. See pricing for the full comparison. For the full cost breakdown, see the true cost of building a CSV importer in-house. For a real example, read how UpKeep improved its CSV import success rate to 99 percent.

Catch bad data before it reaches your database

The point of an importer is that bad rows never reach your tables. Dromo gives you three layers to enforce that.

Field types do the first pass. Beyond strings and numbers, there are built-in types for email, phone number, date, datetime, country, US state, US zip code, URL, domain, UUID, and select lists, each with its own validation. Number fields accept a min and max.

Validators add rules on top: required, unique (with a case-insensitive option), unique across a combination of fields, regular expression match or exclusion, length, and fields that are required only when another field is filled. Each validator can carry your own errorMessage.

Hooks handle what rules cannot. A column hook runs once per column and can be async, which makes it the right place to check values against your own API. Row hooks look at several fields together and run again whenever the user edits a row.

fields={[
  {
    label: "Email",
    key: "email",
    validators: [
      { validate: "required" },
      { validate: "unique_case_insensitive", errorMessage: "This email appears more than once" },
    ],
  },
  {
    label: "SKU",
    key: "sku",
    validators: [
      {
        validate: "regex_match",
        regex: "^[A-Z]{3}-\\d{5}$",
        errorMessage: "SKU must look like ABC-12345",
      },
    ],
  },
]}
columnHooks={[
  {
    fieldName: "email",
    callback: async (values) => {
      const existing = await findExistingCustomers(values.map((v) => v.value));
      return values
        .filter((v) => existing.has(v.value))
        .map((v) => ({
          index: v.index,
          info: [{ message: "Already a customer", level: "warning" }],
        }));
    },
  },
]}

Not every rule change should need a deploy. Schema Studio is a no-code builder where a product manager can add fields, change validators, and mark columns as required. Pass the saved schema's ID to the component with the schemaId prop and the importer loads its fields, settings, and hooks from Schema Studio. Only importIdentifier and developmentMode are then set in code.

Make it look like part of your product

The importer is often the first thing a new customer touches. If it looks like a third-party widget, it tells them they have left your product at the moment you most need their confidence.

Dromo is white label on every plan at no extra cost. There is no Dromo logo, no "powered by" line, and no Dromo name anywhere your users can see. styleOverrides sets colors, typography, and controls to match your design system, and the help text on the upload, matching, and review steps can be rewritten in your product's voice. Custom error messages mean a failed row tells the user exactly how to fix it.

On the Enterprise plan, the interface can be localized into more than 30 languages.

Keep customer data out of third-party servers

Many teams hesitate to route customer files through another vendor, especially files containing personal or regulated data. Dromo lets you decide exactly what, if anything, leaves the user's browser.

Private Mode is the default. The file is parsed and validated entirely in the user's browser, and the results go straight to your application. Dromo never receives the data. AI features need some information to leave the browser, so they run in the modes below.

Headers only. AI column matching and mapping memory need Dromo to see column names, so they run in this mode. In this mode only the column mapping, plus the distinct values of any select fields, is shared. The rows themselves never leave the browser.

Bring Your Own Storage, on the Enterprise plan, writes import data from the browser directly to your own AWS S3, Google Cloud Storage, or Azure Blob Storage bucket. Dromo holds write-only access to generate presigned upload URLs and never has access to the data. Also on the Enterprise plan, the full Dromo stack can be self-hosted in your own cloud via Kubernetes for strict data residency.

Dromo has completed a SOC 2 Type II audit, signs Business Associate Agreements for HIPAA, and offers Standard Contractual Clauses for GDPR. For the details of each option, see how Private Mode works.

Embedded or headless?

The embedded importer is the right choice when a person is uploading a file inside your product. They know what their data means, so they are best placed to resolve an ambiguous column or correct a bad value, and the importer lets them do it without contacting your team.

The Headless API is for files that arrive with nobody present: a partner's nightly export, a scheduled drop from a customer's system, or a file your backend receives from another service. It runs those imports automatically and sends a review link only when a file needs a person.

A schema saved in Schema Studio works in both, so the rules a customer sees in the embedded importer are the same rules applied to their automated feeds.