File

Get started with the File source!

Enable the source

Let's start by enabling the File source for this flow.

You will then be prompted whether you'd like to use hotglue's mapping UI. This allows your users to select matching columns themselves.

I will enable the mapping, and press Save & Continue. Then the File source will appear as follows:

Now let's move to uploading data!

Upload data

Before you get into configuring, you need to upload some data to work with. If you'd like to follow along with this example, you can grab our dummy Salesforce Leads CSV below.

You will upload the data directly from the admin panel by selecting the File source, or pressing the menu on the top and pressing Upload.

This will upload the file selector, where you can upload files directly from the browser.

I will upload our test Lead CSV file for this guide, and select upload.

Column Mapping

The File source also supports use cases where users upload spreadsheets (CSV/XLS), and map their data to some schema you define. hotglue pairs this with a great UI and strong mapping functionality.

Mapping widget

hotglue provides reusable React components that handle CSV uploads, mapping, and validation.

πŸ“˜

See a live demo on CodeSandbox​

Preview of mapping widget

Features

  1. Upload file

  2. Do column mapping

  3. Validate data + preview final output

  4. Approve (sent to hook / piped to target)

Configuration

To tell hotglue how you want users to map their files and how they should be validated you must define a schema and pass it to the React component.

Field Properties

A schema contains an array of fields, which are definitions for the columns you need from your users. Each field has the following properties:

Name

Description

col

User friendly label for the column. This is what will be displayed in the ColumnMapper component

key

Corresponding key for the column. Only used if final data will be formatted to JSON type.

validator

Regex validation expression used to verify that input is valid before ingestion, should be defined using native JavaScript regex .source to avoid invalid syntax

Example Schema

The following schema is used in the gluestick demo. It specifies two desired columns: Name and Phone Number. The Name column has no associated validation, but the Phone Number column uses a regex validation expression to verify it is a valid 10 digit phone number.

{
  fields: [
    {
      col: "Name",
      key: "name"
    },
    {
      col: "Phone Number",
      key: "phoneNumber",
      validator: /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/
        .source
    }
  ]
}

Did this page help you?