Skip to main content



importerKey: string

This can be found in the admin panel.

importerKey = "importer-key";


user: json object

Contains details of the user, so that they can be identified when your backend receives a webhook.

user={{ userId: "12345" }}

metadata: json object

If you have additional data which you want to associate with the import but isn't related to the user, you can use the metadata prop. This will also be included in the webhook your backend receives.

metadata={{ anotherId: "123" }}

onData: Function

onData: (data: {
uploadId: number;
fileName: string;
rows: Record<string, string | number | undefiend>[];
user?: {
userId: string;
metadata?: Record<string, string | number>;
}) => void | Promise<{ errors?: { row: Record<string, string | number | undefined>; error: string }[] } | void>

If you prefer to handle your data locally (and disable uploading csv data to UseCSV), you can set the onData callback option and the data will not be uploaded to UseCSV and sent to your callback function instead when the user finishes importing the CSV.

// example data
uploadId: 334,
fileName: "data.csv",
user: { userId: "12345" },
metadata: { anotherId: "1" },

Return errors:

  • You can retrun from the onData function an array of rows with errors and the user will be provided with a downloadable .csv file containing the rows and thier error.
// example of onData error handeling
onData: async (data) => {
* do your validation

// if no errors

// if you found rows with errors, save the correct rows, and retrun an array of rows with errors
return Promise.resolve({
errors: [
row: {
first_name: "Mari",
email: "",
error: "email already exists",
Usage example
// app.component.ts

import { Component } from "@angular/core";

selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
export class AppComponent {
title = "usecsv";
onDataCallback(data: {}) {
console.log({ data });
// app.component.html

Start importing data with UseCSV
[user]='{ userId: "12345" }'
Import Data