Skip to main content

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://unpkg.com/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>