Embeddable Importer
A drop-in CSV/XLSX importer with guided mapping, validation, and transformation—no custom UI required.
Step 1 · Choose how to import
Let users paste data or upload a CSV/XLSX file from their system.
- • Drag & drop upload
- • Paste from clipboard
- • Upload sample files
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
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
Step 4 · Submit import
Confirm the import, trigger your pipeline and surface a clear success state.
- • Summary of rows imported
- • Link to import history
- • Webhook or API callback
Step 4 submit placeholder
1 · Install from npm
Add the React SDK to your application:
npm install @filefeed/react # or yarn add @filefeed/react
2 · Configure your sheet
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: "string", label: "Email", }, { key: "company", type: "string", label: "Company" }, ], };
3 · Drop-in example
Here's a minimal implementation that wires up the provider, opens the importer from a button and handles the submitted sheet.
React
import type React from "react";
import {
FilefeedProvider, FilefeedSheet, useFilefeed, type Filefeed
} from "@filefeed/react";
const sheetConfig: Filefeed.SheetConfig = {
name: "Sheet",
slug: "sheet",
fields: [
{ key: "firstName", type: "string", label: "First Name" },
{ key: "lastName", type: "string", label: "Last Name" },
{ key: "color", type: "string", label: "Color" },
{ key: "email", type: "string", label: "Email" },
],
};
function OpenImporterButton({ onClick, children }: {
onClick: React.MouseEventHandler<HTMLButtonElement>;
children: React.ReactNode;
}) {
return (
<button className="importer-button" onClick={onClick}>
{children}
<svg width="3" height="24" viewBox="0 -9 3 24" className="button-arrow">
<path
d="M0 0L3 3L0 6"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
</button>
);
}
function Inner() {
const { open, openPortal, closePortal } = useFilefeed();
return (
<div className="container">
<section className="hero">
<h1>FileFeed Importer</h1>
<p>Drop in a fast, friendly CSV/XLSX importer.</p>
<div className="cta-row">
<OpenImporterButton onClick={() => (open ? closePortal() : openPortal())}>
{open ? "Close Importer" : "Open Importer"}
</OpenImporterButton>
</div>
</section>
<FilefeedSheet
config={sheetConfig}
onSubmit={async (sheet) => {
console.log("on Workbook Submit", { sheet });
}}
onRecordHook={(record) => {
record.set("lastName", "Rock");
return record;
}}
/>
</div>
);
}
export default function FilefeedImporter() {
return (
<FilefeedProvider>
<Inner />
</FilefeedProvider>
);
}