File

Get started with the File source!

Enable the source

This is the source you want to enable if you are trying offer your users the option to upload their own CSVs to your platform.

Let's start by enabling the File source for this flow. Go ahead and search for Files in the Data Sources search box.

Now you should go ahead and press connect for the Files tap.

You will then be prompted whether you'd like to use hotglue's mapping UI. This allows your users to select matching columns themselves. If you just want the raw data, you can go ahead and press the Save & Continue button. If you want your users to map their fields to fields you determine, flip the Mapping switch on.

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, so ahead and do that now by clicking the Files card.

Now on this page, you will see the option to upload a file. The file you should be uploading is a CSV that matches the schema you want the data to arrive in. You can take the sample CSV we gave you above or your own CSV and upload it now buy clicking Select Files.

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

Now, your CSV will begin to 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?