FileUpload Embeddable Guide

The FileUpload embeddable allows you to execute pipelines by uploading files via an upload area. Like all nuvo pipeline components, it is easy to integrate into your existing application.

This guide will help you implement the FileUploader component and show how to configure it based on your specific requirements:

1. Install the nuvo package
2. Get your nuvo license key
3. Get the access token
4. Implement the embeddable component in your application
5. Configure the component based on your specific use case

Let's get started

Step 1: Install the nuvo package

Installing the nuvo package is super easy.

Install the React package with NPM:

npm install @getnuvo/pipelines-react

Install it with Yarn:

yarn add @getnuvo/pipelines-react

Step 2: Get your nuvo license key

You can get your nuvo license key from the nuvo User Platform.

If you don’t have an account yet, you can sign up here.

Step 3: Get the access token

In order to authorise yourself or rather the component you have to first get the access token via our authentication API.

You can get access tokens for two different cases:

1. You want your internal users to view a list of all executions
2. You want your customers to view a list of all executions

You want your internal users to upload files and execute pipelines

1. To get the access token for an internal user, you need to first create a user in the nuvo dashboard or use the user API
2. Use the user’s email address and your license key to request the access token. Here is the cURL or JavaScript request you can use to get the access token:

cURL

Javascript

curl -X 'POST' 'https://api-gateway.getnuvo.com/dp/api/v1/auth/access-token' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
  "license_key": LICENSE_KEY,
  "auth": {
    "identifier": E-MAIL,
    "type": "USER"
  }
}' # Replace LICENSE_KEY with your license key & E-MAIL with a user`s email

You want your customers to upload files and execute pipelines

1. To get the access token for your customer, you need to first create a sub-organization (sub-org) via the sub-organization API
2. Use the sub-orgs’s identifier and your license key to retrieve the access token. Here is the cURL or JavaScript request you can use to retrieve the access token:

cURL

Javascript

curl -X 'POST' 'https://api-gateway.getnuvo.com/dp/api/v1/auth/access-token' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
  "license_key": LICENSE_KEY,
  "auth": {
    "identifier": SUB_ORG_IDENTIFIER,
    "type": "SUB_ORG"
  }
}'  # Replace LICENSE_KEY with your license key & SUB_ORG_IDENTIFIER with a sub-org identifier

Step 4: Implement the embeddable component in your application

With the package installed, you can add the FileUploader component to your application.

First, import the component in the file where you want to use the FileUploader component:

import { FileUploader } from "@getnuvo/pipelines-react";
import "@getnuvo/pipelines-react/index.css";

Step 5: Configure the component based on your specific use case

Add the code snippet below and insert the component on the page where you want it to appear:

<FileUploader
  accessToken="ACCESS_TOKEN"
  inputConnectorId="6695093afg66536c28b97222"
  settings={{
    i18nOverrides: {},
    language: "en",
    modal: false,
    allowedFileTypes: ["csv", "tsv", "xls", "xlsx", "json", "xml"],
  }}
  onExecutionView={({ execution }) => {}}
  onClose={() => {}}
/>

accessToken

Add here the access token you’ve got in Step 3

inputConnectorId

Add here the ID of the manual input connector (node.type == MANUAL) you want to use for uploading files.

settings

i18nOverrides

Allows you to override each text element in the interface

language

Defines the language of the flow. So far we only support English ("en")

modal

Defines whether the component is shown inline (false) or within a modal view (true)

allowedFileTypes

Defines which file types can be uploaded. If the list is empty all file types (CSV, TSV, XLS, XLSX, JSON, XML) are allowed.

onExecutionView

This callback runs after the user has clicked on the "View" button of an execution

onClose

This callback runs when the user attempts to close the modal by using the "X" button or clicking outside the modal