Embeddable Importer
Embeddable CSV importer for B2B SaaS onboarding, with guided mapping and validation built in.
Free forever— no credit card required
Step 1 · Choose how to import
Let users paste data or upload a CSV/XLSX file from their system.
- • Drag & drop upload
- • Manual entry
- • Paste from clipboard
Step 2 · Map and prepare fields
Guide users to match their columns to your schema and apply transforms.
- • Best‑match suggestions
- • Required field indicators
- • Preview of mapped headers
Step 3 · Review and clean data & Submit
Show a live preview with inline validation so issues are fixed before import.
- • Row‑level errors
- • Filters for invalid rows
- • Quick fixes for common issues
1 · Install from npm
Add the React SDK to your application:
Shell
npm install @filefeed/react # or yarn add @filefeed/react
2 · Minimal sheet config
Describe the data you expect to receive. FileFeed uses this config for mapping, validation and transformation.
React
import type { Filefeed } from "@filefeed/react"; const sheetConfig: Filefeed.SheetConfig = { name: "Contacts", slug: "contacts", fields: [ { key: "firstName", type: "string", label: "First name", required: true }, { key: "lastName", type: "string", label: "Last name", }, { key: "email", type: "email", label: "Email", }, { key: "company", type: "string", label: "Company" }, ], };
3 · Minimal React example
Minimal usage: define a sheet, render a button, and include FilefeedSheet.
React
import type React from "react"; import { FilefeedSheet, useFilefeed, type Filefeed } from "@filefeed/react"; const sheetConfig: Filefeed.SheetConfig = { name: "Contacts", slug: "contacts", fields: [ { key: "firstName", type: "string", label: "First name" }, { key: "lastName", type: "string", label: "Last name" }, { key: "email", type: "email", label: "Email" }, ], }; export default function Importer() { const { open, openPortal, closePortal } = useFilefeed(); return ( <div> <button onClick={() => (open ? closePortal() : openPortal())}> {open ? "Close Importer" : "Open Importer"} </button> <FilefeedSheet config={sheetConfig} onSubmit={({ rows, slug }) => { console.log("Imported", rows.length, "rows for", slug); }} /> </div> ); }
Ready to add file imports to your app?
Start with our free embeddable importer and add professional CSV/XLSX import functionality to your product in minutes.
No credit card required • Unlimited end users • Free forever