JavaScript Quickstart

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

Step By Step Guide

This guide will walk you through the essential steps to integrate the Dromo Uploader into your JavaScript application.

Installation

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

Using 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>

Using NPM package

Alternatively, you can install the NPM package into your application:

npm install dromo-uploader-js

Then import it into your project:

import DromoUploader from "dromo-uploader-js";

Initialize the Uploader

Create an instance of DromoUploader. You’ll need your Dromo front-end license key, and to define your fields, settings, and user metadata.

const licenseKey = "YOUR_FRONTEND_LICENSE_KEY"; // Get this from the Dromo dashboard
const fields = [
  { label: "Name", key: "name" },
  { label: "Email", key: "email_address" }
  // Define other fields as needed
];
const settings = {
  importIdentifier: "MyContactsImport", // A descriptive name for this import type
  developmentMode: true // Set to false in production
};
const user = {
  id: "unique_user_id_123",
  name: "Jane Doe",
  email: "jane@example.com"
  // Add other user metadata as needed
};

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

For full details on constructor parameters, see the DromoUploader SDK Reference.

You can register callbacks to handle events like data processing or when results are ready.

dromo.onResults((data, metadata) => {
  console.log("Imported Data:", data);
  console.log("Import Metadata:", metadata);
  // Process the data here
  return "Import successful! Thanks!"; // Optional message to show to the user
});

// For other available callbacks like row hooks, column hooks, etc.,
// refer to the [DromoUploader SDK Reference](/reference/dromo-uploader-sdk) and [Hooks documentation](/hooks).

Open the Uploader

Call dromo.open() to launch the Dromo import interface.

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>

Getting Started

Guides

Reference

FAQ & Changelog

JavaScript Quickstart

Step By Step Guide

Using CDN

Using NPM package

Basic Example

​Step By Step Guide

​Using CDN

​Using NPM package

​Basic Example

Step By Step Guide

Using CDN

Using NPM package

Basic Example