Skip to main content
Custom steps allow you to insert your own UI between any two built-in steps in the Dromo import flow. See the Custom Steps guide for a walkthrough and examples.

​
Configuration

​
string
required
Unique identifier for this step. Used as a fallback label in the stepper progress bar if label is omitted.
​
"HEADER_SELECT" | "COLUMN_MATCH" | "SELECT_MATCH"
required
Which built-in step this custom step is inserted after.
​
string
Text shown in the stepper progress bar. Defaults to id if omitted.
​
string
URL of the page to render inside an <iframe> within Dromo’s modal.
​
(uploader, payload: unknown) => void | Promise<void>
Called when the iframe posts { type: "DROMO_MESSAGE", payload }. The uploader argument exposes the same mutation methods available in step hooks.All uploader methods return Promise<void> — await them when order matters.

​
Registering custom steps

​
JavaScript / TypeScript

Call registerCustomStep on the DromoUploader instance before open(). Multiple calls at the same insertAfter position are presented in registration order.

​
React

Pass an array of config objects to the customSteps prop:

​
Angular

Bind a config array to the [customSteps] input on lib-dromo-uploader:

​
postMessage API

Your iframe page communicates with Dromo by posting messages to window.parent.
​
Advance to the next step.
​
Return to the previous step.
​
Trigger the onMessage callback with the uploader instance and payload. Does not automatically navigate — post DROMO_NEXT separately when ready.

​
Uploader methods in onMessage

The uploader instance passed to onMessage exposes the following methods. These are the same mutation methods available in step hooks.
​
Dynamically add a field to the import schema. See instance.addField.
​
Remove a field from the schema. See instance.removeField.
​
Inject rows into the dataset. Returns the IDs of the added rows. See instance.addRows.
​
Remove rows from the dataset by ID. See instance.removeRows.
​
Update the current user associated with the import.