Finishing an import and getting results

The onResults callback

This callback is called when the user completes the import flow. onResults is called with two arguments.

• data{ [key: string]: string | boolean | number | null }[]

  An array of objects, one for each row in the final data.

  The keys of each object will be the field keys of each mapped field, and the values will be the final value of that field, based on the field's type.

  Note: If a field is manyToOne, the value will be an array.

• metadataobject

  • idstring | null

    Dromo assigns a unique ID to each completed import that is synced to the backend. This ID can be used to retrieve the import from the Dromo API.

    If backendSyncMode is "DISABLED", the import ID will be null.

  • filenamestring | null

    The filename of the file that the user uploaded.

    null if the user did not upload a file (i.e. used manual entry).

  • importIdentifierstring

    The importIdentifier of this import

  • userUser

    The user associated with this import

  • rowsWithErrornumber[]

    Array of row indices where at least one error appears.

  • errors{ rowIndex: number, fieldKey: string, message: string, value: string }[]

    Array of objects detailing all the errors in the upload.

  • fieldsobject

    An object whose keys are the field keys and values are objects containing metadata about that field

    • fileHeaderstring | null

      The header this field was mapped to. null if no file was uploaded.

    • fileHeaderIndexnumber | null

      The column header index this field was mapped to. null if no file was uploaded.

    • isCustomboolean

      Whether this field was added by the user as a custom field

    • manyToOneboolean

      Indicates if this field is manyToOne.

    • fileHeadersstring[]

      The headers that were mapped to the field if it is manyToOne.

    • fileHeaderIndexesnumber[]

      The indexes of columns that were mapped to a manyToOne field.

onResults callback example

JavaScript

dromo.onResults(function (response, metadata) {
  // Do something with the data here
  console.log(response, metadata);
});

React

<DromoUploader
  ...
  onResults={(response, metadata) =>
    // Do something with the data here
    console.log(response, metadata)
  }
>
  Launch Dromo
</DromoUploader>

The onCancel callback

This callback is called if the user exits from the import without completing it.

onCancel does not receive any arguments.

The beforeFinish callback

Sometimes, you may wish to perform validation on the final result data before the user leaves the import.

To accomplish this, you can define a beforeFinish callback. This callback will fire when the user finishes the import, and receives the same arguments as the onResults callback. The callback also receives a third argument, instance, with the instance of the uploader.

If you define a beforeFinish callback, you can cancel finishing the upload by returning an object in the format { cancel: true, message: "Message to user" }. In this case, the user will remain on the Review Screen, with the given error message shown to the user. The onResults callback will not fire and the import will not complete. This process will repeat the next time the user submits the import.

Otherwise, if nothing is returned from the beforeFinish callback (or any other value is returned), the onResults callback will fire and the import will complete normally.

• data{ [key: string]: string | boolean | number | null }[]

  An array of objects, one for each row in the final data.

  The keys of each object will be the field keys of each mapped field, and the values will be the final value of that field, based on the field's type.

• metadataobject

  • filenamestring | null

    The filename of the file that the user uploaded.

    null if the user did not upload a file (i.e. used manual entry).

  • importIdentifierstring

    The importIdentifier of this import

  • userUser

    The user associated with this import

  • rowsWithErrornumber[]

    Array of row indices where at least one error appears.

  • errors{ rowIndex: number, fieldKey: string, message: string, value: string }[]

    Array of objects detailing all the errors in the upload.

  • fieldsobject

    An object whose keys are the field keys and values are objects containing metadata about that field

    • fileHeaderstring | null

      The header this field was mapped to. null if no file was uploaded.

    • fileHeaderIndexnumber | null

      The column header index this field was mapped to. null if no file was uploaded.

    • isCustomboolean

      Whether this field was added by the user as a custom field

    • manyToOneboolean

      Indicates if this field is manyToOne.

    • fileHeadersstring[]

      The headers that were mapped to the field if it is manyToOne.

    • fileHeaderIndexesnumber[]

      The indexes of columns that were mapped to a manyToOne field.

• instanceDromoUploader

  The Dromo Uploader instance which you can call mutation methods on

beforeFinish callback example

JavaScript

dromo.beforeFinish(function (data, metadata, instance) {
  if (data.length < 20) {
    return { cancel: true, message: "You must import at least 20 rows" }
  }
});

React

<DromoUploader
  ...
  beforeFinish={(data, metadata, instance) =>
    if (data.length < 20) {
      return { cancel: true, message: "You must import at least 20 rows" }
    }
  }
>
  Launch Dromo
</DromoUploader>

Custom fields

If you have enabled allowCustomFields, it will allow the user to add custom fields that are not part of the field schema. The name of the custom field will be added as a key to the result objects.

As an example, if the user defines a column name "fav_color", the response would look like the following:

{
  "name": "Jack",
  "email_address": "jack@thehill.com",
  "fav_color": "blue"
}