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.
Sample code with basic usage:
<buttonclass="btn btn-primary"data-csvboxdisabledonclick="importer.openModal();">Import</button><scripttype="text/javascript"src="https://js.csvbox.io/script.js"></script><scripttype="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("YOUR_LICENSE_KEY_HERE",{ }, 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.
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
For Angular versions below 12 use @csvbox/angular_8 and for Angular versions 12 and above use @csvbox/angular
@Component({ selector:'app-root', template:` <csvbox-button [licenseKey]="licenseKey" [user]="user" [imported]="imported.bind(this)"> Import </csvbox-button> `})exportclassAppComponent { title ='example'; licenseKey ='YOUR_LICENSE_KEY_HERE'; user = { user_id:'default123' };imported(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.
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.
If your app/database is restricted to IP addresses on an allowlist, you will need to manually add CSVbox's addresses in order to use the importer.
You will have to whitelist the following IP addresses:
18.233.84.183
18.213.249.53
3.73.26.144
Note that at any time, you will only see one of these addresses in use. However, the active IP address can change at any time, so you should add them all to your IP whitelist to ensure no interruptions in service.
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.
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:
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:
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:
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:
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.
result - It is of type boolean with the value true if the import is successful and false if the import fails.
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:
The imported property provides access to the result and datavariables via the specified callback function.
imported(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.
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.
max_rows_allow_submit
Type: boolean
Default: true
Description:
Allow or disallow submission of the permissible number of rows when the overall row count exceeds the limit. Consider row limit (max_rows) is set to 5. If max_rows_allow_submit is set to true then the user can upload the top 5 rows of his file. If max_rows_allow_submit is set to false then the user will not be able to submit even 1 row if the overall row count exceeds max_rows.
max_rows_custom_message
Type: string
Default: null
Description:
Display a custom message to the user when the file row count is greater than max_rows. This message will show only when max_rows_allow_submit is set to false.
min_rows
Type: number
Default: null
Description:
The minimum number of rows that is required for a single upload.
min_rows_custom_message
Type: string
Default: null
Description:
Display a custom message when the file row count is less than min_rows.
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:
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.
sample_template_url
Type: String
Default: null
Description:
It is the URL to download the sample CSV file for the end users.
sample_template_button_text
Type: String
Default: null
Description:
It specifies the text on the button for downloading the sample CSV file.
The sample_template_url and the sample_template_button_text options can be used to provide the end users with a customized dynamic sample CSV file.
Examples:
Pass additional options as input parameters to the setOptionsmethod.
It specifies the name of the file that gets pushed to your destination. This is applicable for the following destinations only:
s3
FTP Server
Google Sheets
upload_file_url
Type: String
Default: null
Description:
The URL of the file to be imported. This is useful in cases where you want the data to be pre-loaded into the importer without asking the users to upload the file. Simply provide the file location and the importer will load the data when the user clicks the Import button.
upload_file_worksheet_name
Type: String
Default: null
Description:
The name of the worksheet that should be uploaded if you are uploading a file with multiple tabs via upload_file_url option.
Events
Here is the list of additional importer events/properties:
onReady
Triggers when the importer is initialized and ready for use by the users. The users can then click the Import button to open the Importer modal dialog.
onLoadStart
Triggers when the importer iFrame starts loading.
In vanilla Javascript, onLoadStart will trigger only when the Lazy Load is activated. Without Lazy Load, the iframe loading starts as soon as the importer is initialized.
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.
The importer assets are loaded on the webpage load. This can sometimes slow the app if you initialize multiple importers on the same page. As a workaround, you can defer the loading of the importer assets to the Import button click. This can be done by adding the lazy: true parameter to the initialization code.
let importer =newCSVBoxImporter("YOUR_LICENSE_KEY_HERE",{ }, callback, { lazy:true });