Events & apply

The element communicates entirely through DOM CustomEvents — subscribe to as many as you need.

Event	Fires when	detail includes
import-ready	License verified, widget mounted	tenantId
import-ingested	A file is decoded into a record	recordId, deduplicated
import-mapped	Columns are matched to your schema	recordId, mapping
import-step	The wizard advances a step	step, previous
import-applied	The import is delivered	recordId, action, rowCount
import-error	Something fails	code, message, step
import-cancel	The user dismisses the import	—

Events carry summaries, not the data itself — import-applied tells you that rows were delivered and how many, never the rows:

const el = document.querySelector('mildport-import')!;

el.addEventListener('import-applied', e => {
  const { rowCount, action } = (e as CustomEvent).detail;
  console.log(`${rowCount} rows delivered (${action})`);
});

Two ways to receive rows

Browser mode (applyMode = 'browser') — the rows (and the mapping that produced them) are handed to the element’s onResults property when the user applies:

el.onResults = (rows, mapping) => saveRows(rows, mapping);

Need to inspect or veto the submit before it completes? Use the resultsHook (the third argument of mountImportFlow) — same rows, plus veto controls:

mountImportFlow(el, flowInput, {
  resultsHook: ({ rows, mapping }, controls) => {
    // controls.block('reason') vetoes the submit; doing nothing lets it proceed.
  },
});

Good for demos, offline embeds and client-side flows.

Webhook mode (applyMode = 'webhook') — the engine POSTs the applied rows to your backend as an HMAC-signed delivery, with durable retries and an audit log. This is the production path. See the webhook reference for the signature and headers.

Note

Whichever mode you choose, the rows are the same shape: mapped onto your target catalog fields, alongside the mapping that produced them — via onResults/resultsHook in browser mode, in the signed POST body in webhook mode.