Quickstart Examples

To use the below examples, you will need to change the following values:

Your Organization’s API key: You can find this at the top of the Importers page.
Your Importer’s ID: You can find this in the table on the Importers page.

Basic Example

This provides a quick example of a path for the importer where all records are valid and submittable.

<!DOCTYPE html>
<html>
  <head>
    <script
      type="text/javascript"
      src="https://unpkg.com/fuse-importer@latest"
    ></script>
    <script type="text/javascript">
      const importer = new FuseImporter();

      importer.getSessionToken = ... // see https://fuse-docs.flatirons.com/getting-started/sessions

      importer.onValidateRecord = async (record) => {
        // return no frontend validation errors or warnings
        return { errors: {}, warnings: {} };
      };

      importer.onSubmit = async (records) => {
        // an empty hash will tell us the import was successful!
        return {
          message: "Your data was imported successfully",
          errors: {},
        };
      };

      window.showFuseImporter = () => {
        importer.show();
      };
    </script>
  </head>

  <body>
    <button onclick="javascript:showFuseImporter()">Show Importer</button>
  </body>
</html>

Example of Validations

The example below illustrates both frontend and backend validations.

<!DOCTYPE html>
<html>
  <head>
    <script
      type="text/javascript"
      src="https://unpkg.com/fuse-importer@latest"
    ></script>
    <script type="text/javascript">
      const importer = new FuseImporter();

      importer.getSessionToken = ... // see https://fuse-docs.flatirons.com/getting-started/sessions

      // frontend validations
      importer.onValidateRecord = async (record) => {
        const errors = {};

        // force emails to include Gmail
        if (!record.email?.includes("gmail")) {
          errors["email"] = "Email must from gmail";
        }

        return { errors: errors, warnings: {} };
      };

      importer.onSubmit = async (records) => {
        // submit to your backend here

        // return backend errors
        // each record passed to this function has a
        // records[index]._meta.id which represents the rowId.
        // If your backend has an error in a row,
        // you can pass this ID back with a custom error message for a field.

        return {
          message:
            "Most rows were imported. We found a few errors. Please fix them and re-submit",
          errors: {
            [records[0]._meta.id]: {
              email: "Email is already taken. Emails must be unique.",
            },
          },
        };
      };

      window.showFuseImporter = () => {
        importer.show();
      };
    </script>
  </head>

  <body>
    <button onclick="javascript:showFuseImporter()">Show Importer</button>
  </body>
</html>

Importer Setup

Accessing Data

Use Cases

Using Columns

Appearance

Extending Functionality

JS Implementations

More to Love

Basic Example

Example of Validations

​Basic Example

​Example of Validations

Basic Example

Example of Validations