JavaScript Quickstart

tip

Are you looking for a framework-specific SDK? Check the Getting Started guides in the sidebar.

Installation

There are two ways to add the Dromo JavaScript SDK to your codebase.

CDN

You can source the SDK directly from our CDN:

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/dromo-uploader-js/dist/DromoUploader.js"
></script>

NPM package

Or, you can install the NPM package into your application.

npm install dromo-uploader-js

import DromoUploader from "dromo-uploader-js";

Usage

First, you will need to create a DromoUploader instance. The DromoUploader constructor takes 4 parameters.

• licenseKeystringRequired

  Your Dromo front-end license key, which can be found in the Dromo dashboard

• fieldsField[]Required

  An array of fields which comprise your import schema

• settingsSettingsRequired

  Settings to change the behavior of the Dromo importer

• userUserRequired

  Metadata about the end user to associate with the import

const dromo = new DromoUploader(licenseKey, fields, settings, user);

You can register callbacks for running hooks and receiving results.

The DromoUploader instance exposes the following configuration methods.

• registerColumnHook(fieldKey: string, callback: ColumnHookFn) => void

  Used to register a column hook callback on the field with the given field key

• registerRowHook(callback: RowHookFn) => void

  Used to register a standard row hook callback

• registerBulkRowHook(callback: BulkRowHookFn) => void

  Used to register a bulk row hook callback

• registerStepHook(stepHookType: "UPLOAD_STEP" | "REVIEW_STEP" | "REVIEW_STEP_POST_HOOKS", callback: StepHookFn) => void

  Used to register a step hook callback of the given type

• registerRowDeleteHook(callback: RowDeleteHookFn) => void

  Used to register a row delete hook callback

• beforeFinish(callback: BeforeFinishCallbackFn) => void

  Used to register a beforeFinish callback

• onResults(callback: OnResultsCallbackFn) => void

  Used to register an onResults callback

• onCancel() => void

  Called when the user exists the Dromo Uploader without completing the import

dromo.registerColumnHook('zipCode', (colData) => {
  return colData.map((zipCode) => {
    return { ...zipCode, value: zipCode.value.padStart(5, '0') };
  });
});

dromo.onResults((data, metadata) => {
  console.log(data);
});

With Dromo fully configured, now call open on the uploader to start the import process.

dromo.open();

Basic example

To use the example below, replace "FRONTEND_API_KEY" with your frontend license key from the Dromo dashboard.

<script type="text/javascript">
  const license = "FRONTEND_API_KEY";
  const fields = [
    {
      label: "Name",
      key: "name"
    },
    {
      label: "Email",
      key: "email_address"
    }
  ];

  const settings = {
    importIdentifier: "Contacts",
    developmentMode: true
  };

  const user = {
    id: "1",
    name: "Jane Doe",
    email: "jane@dromo.io",
    companyId: "Dromo",
    companyName: "12345"
  };

  const dromo = new DromoUploader(license, fields, settings, user);

  dromo.onResults(function (response, metadata) {
    // Do something with the data here
    return "Done!";
  });
</script>

<div id="root">
  <button onclick="dromo.open()">Open Dromo</button>
</div>