Skip to main content

JavaScript Quickstart


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


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


You can source the SDK directly from our CDN:


NPM package

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

npm install dromo-uploader-js
import DromoUploader from "dromo-uploader-js";


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 => {
return { ...zipCode, value: zipCode.value.padStart(5, '0') };

dromo.onResults((data, metadata) => {

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

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: "",
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!";

<div id="root">
<button onclick="">Open Dromo</button>