Links

2. Install Code

Add a snippet of code to your app to start accepting spreadsheets from your users.
Go to the 'Code' tab of the sheet and find the integration code. Place the code in your application at the location you want to display the import button.
Javascript
React
Angular
Vuejs
Sample code with basic usage:
<button class="btn btn-primary" data-csvbox disabled onclick="importer.openModal();">Import</button>
<script type="text/javascript" src="https://js.csvbox.io/script.js"></script>
<script type="text/javascript">
function callback(result, data) {
if(result){
console.log("success");
console.log(data.row_success + " rows uploaded");
//custom code
}else{
console.log("fail");
//custom code
}
}
let importer = new CSVBoxImporter("z0ad8U7en2pFU0bT3z8o5UAUOi5BX6",{
}, callback);
importer.setUser({
user_id: "default123"
})
</script>
Each sheet has a unique Licence Key. Find the Licence Key of the sheet on the 'Code' tab of the sheet page and pass it to the CSVBoxImporter function.
Install using npm:
npm install @csvbox/react
This will give you access to the CSVBoxButton component having the basic functionality of our importer. Import the CSVBoxButton component to your project.
import { CSVBoxButton } from '@csvbox/react'
Basic usage:
<CSVBoxButton
licenseKey="z0ad8U7en2pFU0bT3z8o5UAUOi5BX6"
user={{
user_id: "default123"
}}
onImport={(result, data) => {
if(result){
console.log("success");
console.log(data.row_success + " rows uploaded");
//custom code
}else{
console.log("fail");
//custom code
}
}}
render={(launch, isLoading)=>{
return <button disabled={isLoading} onClick={launch}>Upload file</button>;
}}
>
Import
</CSVBoxButton>
Each sheet has a unique Licence Key. Find the Licence Key of the sheet on the Code section of the sheet page and attach it to the licenseKey property of the CSVBoxButton component.
The optional render property allows you to pass in your button to use in place of the standard csvbox element.
Install using npm:
npm install @csvbox/angular
Import:
Add CSVBoxAngularModule to your module imports.
import { CSVBoxAngularModule } from "@csvbox/angular";
@NgModule({
...
imports: [
...
CSVBoxAngularModule
]
})
Once you have this setup, in your app component file, you will be able to import and access theCSVBoxMethods module for use.
It will bring the csvbox-button component into your project. Example:
<csvbox-button [licenseKey]="licenseKey" [onImport]="onData.bind(this)" [user]="user">Import</csvbox-button>
Basic usage:
import { CSVBoxMethods } from "@csvbox/angular"
@Component({
selector: 'app-root',
template: `
<csvbox-button
[licenseKey]="licenseKey"
[user]="user"
[onImport]="onData.bind(this)">
Import
</csvbox-button>
`
})
export class AppComponent implements CSVBoxMethods {
title = 'example';
licenseKey = 'YOUR_LICENSE_KEY_HERE';
user = { user_id: 'default123' };
onData(result: boolean, data: any) {
if(result) {
console.log("Sheet uploaded successfully");
console.log(data.row_success + " rows uploaded");
}else{
console.log("There was some problem uploading the sheet");
}
}
}
Each sheet has a unique Licence Key. Find the Licence Key of the sheet on the Code section of the sheet page and attach it to the licenseKey property of the AppComponent.
Styling the button:
In order to style the <csvbox-button> from within your parent component, ensure that your parent component has ViewEncapsulation.None, pass down a class to <csvbox-button>, and now you will be able to style the button one-level down.
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<csvbox-button
[licenseKey]="licenseKey"
[user]="user"
[dynamicColumns]="dynamicColumns"
[onImport]="onData.bind(this)"
class=“csvbox-btn”
>
Import
</csvbox-button>
`,
encapsulation: ViewEncapsulation.None,
styles: [`
.csvbox-btn button {
background: #007bff;
border-radius: 3px;
}
`],
export class AppComponent implements CSVBoxMethods {
//...
}
Install using npm:
npm install @csvbox/vuejs
This will give you access to the CSVBoxButton component. Import the CSVBoxButton component to your project.
import { CSVBoxButton } from '@csvbox/vuejs'
Now just import the CSVBoxButton and include it in your Vue components, and you're ready to get started.
Basic usage:
<template>
<div id="app">
<CSVBoxButton
:licenseKey="licenseKey"
:user="user"
:onImport="onImport">
Upload File
</CSVBoxButton>
</div>
</template>
<script>
import { CSVBoxButton } from '@csvbox/vuejs';
export default {
name: 'App',
components: {
CSVBoxButton,
},
data: () => ({
licenseKey: 'z0ad8U7en2pFU0bT3z8o5UAUOi5BX6',
user: {
user_id: 'default123',
},
}),
methods: {
onImport: function (result, data) {
if(result){
console.log("success");
console.log(data.row_success + " rows uploaded");
//custom code
}else{
console.log("fail");
//custom code
}
}
},
}
</script>
Each sheet has a unique Licence Key. Find the Licence Key of the sheet on the Code section of the sheet page and attach it to the licenseKey property of the CSVBoxButton component.

Referencing the user

You can configure custom user attributes in the installation code to identify the users in your platform and match them with their respective imports.
Javascript
React
Angular
Vuejs
Pass custom user attributes as input parameters to the setUsermethod. The custom user attributes will be pushed to your destination along with the uploaded data.
user_id is the only custom attribute that is mandatory. Apart from user_id, you can add up to 4 custom attributes in the<key>: <value>format. Example:
importer.setUser({
user_id: "1a2b3c4d5e6f",
team_id: "sales2",
isAuthenticated: "true",
permissionLevel: "admin",
})
Pass custom user attributes as an object to the userproperty of the CSVBoxButton component. The custom user attributes will be pushed to your destination along with the uploaded data.
user_id is the only custom attribute that is mandatory. Apart from user_id, you can add up to 4 custom attributes in the <key>: <value>format. Example:
user={{
user_id: "1a2b3c4d5e6f",
team_id: "sales2",
isAuthenticated: "true",
permissionLevel: "admin",
}}
Pass custom user attributes as an object to the userproperty of the AppComponent. The custom user attributes will be pushed to your destination along with the uploaded data.
user_id is the only custom attribute that is mandatory. Apart from user_id, you can add up to 4 custom attributes in the <key>: <value>format. Example:
user={
user_id: "1a2b3c4d5e6f",
team_id: "sales2",
isAuthenticated: "true",
permissionLevel: "admin",
}
Pass custom user attributes as an object to the userproperty of the CSVBoxButton component. The custom user attributes will be pushed to your destination along with the uploaded data.
user_id is the only custom attribute that is mandatory. Apart from user_id, you can add up to 4 custom attributes in the <key>: <value>format. Example:
user: {
user_id: "1a2b3c4d5e6f",
team_id: "sales2",
isAuthenticated: "true",
permissionLevel: "admin",
},

Callback function

Once the user uploads a file the importer will return the status of the import along with metadata describing the completed import. Data is returned via two variables: result and data.
  1. 1.
    result - It is of type boolean with the value true if the import is successful and false if the import fails.
  2. 2.
    data - It returns JSON data as shown below:
{
"import_id": 79418895,
"sheet_id": 575,
"sheet_name": "Products Import",
"destination_type": "webhook"
"row_count": 100,
"row_success": 98,
"row_fail": 2,
"import_status": "Partial",
"import_starttime": 87987897897,
"import_endtime": 90890890809,
"original_filename": "example-1.csv",
"raw_file": "https://file-download-link",
"custom_fields": {
"user_id": "Z1001"
},
"column_mappings": [
{ "Name": "Name" },
{ "SKU": "Product SKU" },
{ "Price": "Sale Price" },
{ "Quantity": "Inventory"},
{ "Image URL": "Img"}
]
}
The data object will be null if the import fails
You can also configure the importer to receive the entire file data in JSON format in the data object above. More information here.
You can write custom code to handle the success or failure conditions client side.
Javascript
React
Angular
Vuejs
The result and datavariables will be available in the callbackfunction that is triggered when the import is completed.
function callback(result, data) {
if(result){
console.log("success");
console.log(data.row_success + " rows uploaded");
//custom code
}else{
console.log("fail");
//custom code
}
}
Pass additional options as an object to the userproperty of the CSVBoxButton component. The custom user attributes will be pushed to your destination along with the uploaded data.
user_id is the only custom attribute that is mandatory. Apart from user_id, you can add up to 4 custom attributes in the <key>: <value>format. Example:
user={{
user_id: "1a2b3c4d5e6f",
team_id: "sales2",
isAuthenticated: "true",
permissionLevel: "admin",
}}
The onImport property provides access to the result and datavariables via the specified callback function.
onData(result: boolean, data: any) {
if(result) {
console.log("Sheet uploaded successfully");
console.log(data.row_success + " rows uploaded");
}else{
console.log("There was some problem uploading the sheet");
}
}
The onImport property provides access to the result and datavariables.
onImport: function (result, data) {
if(result){
console.log("success");
console.log(data.row_success + " rows uploaded");
//custom code
}else{
console.log("fail");
//custom code
}
}

Options

Here is the list of additional configuration options available with the csvbox importer.

max_rows

  • Type: number
  • Default: null
  • Description:
    Specify the maximum number of rows that a single file can import. This value excludes the headers of the file. So if the number of rows in a sheet is 101, but the first row is the header, then this file would be considered to have 100 data rows in it.

language

  • Type: string
  • Default: null
  • Description:
    Specify the importer frontend language. This value will override the default language option configured via the csvbox dashboard. Acceptable values are:
Value
Language
en
English
de
German
fr
French
es
Spanish
nl
Dutch
pt
Portuguese
th
Thai
pl
Polish
ro
Romanian
he
Hebrew

allow_invalid

  • Type: boolean
  • Default: 0
  • Description:
    It specifies if the users can continue to submit the file even if there are validation errors.

request_headers

  • Type: { key: value, key: value, ... }
  • Default: null
  • Description:
    This is where you define additional headers that get passed with each HTTP request.

dynamic_list_request_headers

  • Type: { key: value, key: value, ... }
  • Default: null
  • Description:
    This is where you define additional headers that get passed with each HTTP request for the dynamic list API.
Examples:
Javascript
React
Angular
Vuejs
Pass additional options as input parameters to the setOptionsmethod.
importer.setOptions({
max_rows: 50,
language: 'de',
request_headers: {
"Content-Type": "application/json",
"X-Access-Token": "71ab1d73a4d1319b260e9a0sdbdbc1c"
}
})
Pass the additional options as an object to the optionsproperty of the CSVBoxButton component.
options={{
max_rows: 50,
language: 'de',
request_headers: {
"Content-Type": "application/json",
"X-Access-Token": "71ab1d73a4d1319b260e9a0sdbdbc1c"
}
}}
Pass the additional options as an object to the optionsproperty of the AppComponent.
options={
max_rows: 50,
language: 'de',
request_headers: {
"Content-Type": "application/json",
"X-Access-Token": "71ab1d73a4d1319b260e9a0sdbdbc1c"
}
}
Pass the additional options as an object to the optionsproperty of the CSVBoxButton component.
options: {
max_rows: 50,
language: 'de',
request_headers: {
"Content-Type": "application/json",
"X-Access-Token": "71ab1d73a4d1319b260e9a0sdbdbc1c"
}
},

Events

Here is the list of additional importer events/properties:

onReady

Triggers when the importer is initialized and ready for use by the users.

onClose

Triggers when the importer is closed.

onSubmit

Triggers when the user hits the 'Submit' button to upload the validated file. data object is available in this event. It contains metadata related to the import.
onSubmit Data object sample
Examples:
Javascript
React
Angular
Vuejs
<button class="btn btn-primary" data-csvbox disabled onclick="importer.openModal();">Import</button>
<script type="text/javascript" src="https://js.csvbox.io/script.js"></script>
<script type="text/javascript">
function callback(result, data) {
if(result){
console.log("Sheet uploaded successfully");
console.log(data.row_success + " rows uploaded");
}else{
console.log("There was some problem uploading the sheet");
}
}
let importer = new CSVBoxImporter("b3NhSgKwXMbNaUbKJ8b3sil9H0f0yGp",{}, callback);
importer.setUser({
user_id: 'default123'
});
importer.listen("onReady", function(){
console.log("onReady");
});
importer.listen("onClose", function(){
console.log("onClose");
});
importer.listen("onSubmit", function(data){
console.log("onSubmit");
console.log(data.import_id);
});
</script>
import React from 'react'
import { CSVBoxButton } from '@csvbox/react'
const App = () => {
return <CSVBoxButton licenseKey="Sheet license key" user={{
user_id: "default123"
}}
onImport={(result, data) => {
if(result){
console.log("success");
console.log(data.row_success + " rows uploaded");
//custom code
}else{
console.log("fail");
//custom code
}
}}
onReady={()=>{
console.log("Importer ready");
}}
onClose={()=>{
console.log("Modal closed");
}}
onSubmit={(data)=>{
console.log("onSubmit");
console.log(data.import_id);
}}
>Import</CSVBoxButton>
}
import { Component } from '@angular/core';
import { CSVBoxMethods } from "angular-adapter"
@Component({
selector: 'app-root',
template: `
<csvbox-button
[licenseKey]="licenseKey"
[user]="user"
[dynamicColumns]="dynamicColumns"
[onImport]="onData.bind(this)"
[onClose]="onClose.bind(this)"
[onSubmit]="onSubmit.bind(this)"
[onReady]="onReady.bind(this)">
Import
</csvbox-button>
`
})
export class AppComponent implements CSVBoxMethods {
title = 'example';
licenseKey = 'License Key';
user = { user_id: 'default123' };
dynamicColumns = [
{
column_name: 'col2',
type: 'text'
}
];
onData(result: boolean, data: any) {
console.log("result", result, "data", data)
if(result) {
console.log("Sheet uploaded successfully");
console.log(data.row_success + " rows uploaded");
}else{
console.log("There was some problem uploading the sheet");
}
}
onClose(){
console.log("onClose");
}
onReady(){
console.log("onReady");
}
onSubmit(data: any){
console.log("onSubmit");
console.log(data.import_id);
}
}
<template>
<div>
<CSVBoxButton
licenseKey="rcDjjrQBpu5IwDhx10uFUUW9xP0rWm"
:user="{ user_id: 'default123' }"
:onImport="onImport"
:onReady="onReady"
:onClose="onClose"
:onSubmit="onSubmit"
>Import</CSVBoxButton>
</div>
</template>
<script>
import CSVBoxButton from './components/CSVBoxButton'
export default {
name: 'App',
components: {
CSVBoxButton
},
methods: {
onImport(result, data){
console.log("onImport", result, data);
if(result){
console.log("success");
console.log(data.row_success + " rows uploaded");
//custom code
}else{
console.log("fail");
//custom code
}
},
onReady(){
console.log("onReady");
},
onClose(){
console.log("onClose");
},
onSubmit(data){
console.log("onSubmit");
console.log(data.import_id);
}
},
mounted() {
},
}
</script>