Skip to main content

Options

Required

importerKey: string

Which can be found in the admin panel.

importerKey: "your-importer-key";

Optional

user: json object

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

user: {
userId: "123";
}

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.

// usage example
var importButton = document.getElementById("import-data-button");
importButton.onclick = function () {
useCsvPlugin({
importerKey: "your-importer-key",
user: { userId: "12345" },
metadata: { anotherId: "1" },
onData: (data) => {
console.log("data:", data);
},
});
};
// console output
data:
{
uploadId: 334,
fileName: "data.csv",
user: { userId: "12345" },
metadata: { anotherId: "1" },
rows:[
{
first_name:"Mari",
email:"Mari@gmail.com"
},
{
first_name:"Jhon",
email:"Jhon@gmail.com"
}
]
}

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
return;

// 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: "Mari@gmail.com",
},
error: "email already exists",
},
],
});
};