> ## Documentation Index
> Fetch the complete documentation index at: https://developer.dromo.io/llms.txt
> Use this file to discover all available pages before exploring further.

# DromoUploader SDK Reference

> Detailed reference for the DromoUploader JavaScript SDK instance, its constructor, and configuration methods.

## DromoUploader Instance

To begin an import, you first need to create an instance of the `DromoUploader`:

```javascript theme={null}
const dromo = new DromoUploader(licenseKey, fields, settings, user);
```

### Constructor

The `DromoUploader` constructor takes 4 parameters:

<ResponseField name="licenseKey" type="string" required>
  Your Dromo front-end license key, which can be found in [the Dromo dashboard](https://dashboard.dromo.io/).
</ResponseField>

<ResponseField name="fields" type="Field[]" href="/fields" required>
  An array of fields which comprise your import schema.
</ResponseField>

<ResponseField name="settings" type="Settings" href="/settings" required>
  Settings to change the behavior of the Dromo importer.
</ResponseField>

<ResponseField name="user" type="User" href="/users" required>
  Metadata about the end user to associate with the import.
</ResponseField>

### Configuration Methods

Once you have an instance, you can register callbacks and configure its behavior using the following methods. You can register callbacks for [running hooks](/reference/hooks) and [receiving results](/reference/results).

<ResponseField name="registerColumnHook(fieldKey: string, callback: ColumnHookFn) => void">
  Used to register a [column hook](/reference/hooks#column-hooks) callback on the field with the given field key.
</ResponseField>

<ResponseField name="registerRowHook(callback: RowHookFn) => void">
  Used to register a standard [row hook](/reference/hooks#standard-row-hooks) callback.
</ResponseField>

<ResponseField name="registerBulkRowHook(callback: BulkRowHookFn) => void">
  Used to register a bulk [row hook](/reference/hooks#standard-row-hooks) callback.
</ResponseField>

<ResponseField name="registerStepHook(stepHookType: &#x22;UPLOAD_STEP&#x22; | &#x22;REVIEW_STEP&#x22; | &#x22;REVIEW_STEP_POST_HOOKS&#x22;, callback: StepHookFn) => void">
  Used to register a [step hook](/reference/hooks#column-hooks) callback of the given type.
</ResponseField>

<ResponseField name="registerRowDeleteHook(callback: RowDeleteHookFn) => void">
  Used to register a [row delete hook](/reference/hooks#row-delete-hooks) callback.
</ResponseField>

<ResponseField name="registerCustomStep(config) => void">
  Registers a [custom step](/reference/custom-steps) to be inserted into the import flow. Call before `open()`. Multiple steps at the same `insertAfter` position are presented in registration order.
</ResponseField>

<ResponseField name="beforeFinish(callback: BeforeFinishCallbackFn) => void">
  Used to register a [beforeFinish callback](/reference/results#the-beforefinish-callback).
</ResponseField>

<ResponseField name="onResults(callback: OnResultsCallbackFn) => void">
  Used to register an [onResults callback](/reference/results#the-onresults-callback).
</ResponseField>

<ResponseField name="onCancel() => void">
  Called when the user exits the Dromo Uploader without completing the import.
</ResponseField>

<ResponseField name="onUserEvent(callback: (event: IUserEvent) => void) => void">
  Registers a callback that fires whenever the user interacts with a tracked UI control inside the importer (e.g. button clicks). Useful for analytics, audit logging, and conditional UI reactions. Only one callback can be registered per instance — calling this a second time replaces the first. Not invoked in headless mode. See the [onUserEvent reference](/reference/on-user-event) for event types, payload shapes, and the full button name reference.
</ResponseField>

**Example of registering callbacks:**

```javascript theme={null}
dromo.registerColumnHook('zipCode', (colData) => {  
  return colData.map((zipCode) => {
    return { ...zipCode, value: zipCode.value.padStart(5, '0') };  
  });
});
dromo.onResults((data, metadata) => {  
  console.log(data);
});
```

### Starting the Import

With Dromo fully configured, call `open()` on the uploader instance to start the import process.

<ResponseField name="open() => void">
  Opens the Dromo Uploader interface to begin the import process.
</ResponseField>

```javascript theme={null}
dromo.open();
```