Skip to main content
Version: v3.0

Examples

A few examples to help you get started​

Workbooks​

A Workbook is how you define one or more data schemas known as sheets. It describes the final shape of transformed data that you want to get out of Flatfile.

Full example​

If you used the CLI quickstart guide, you'll find a full working example of a Workbook in your starter project at /examples/workbooks/FullExample.ts.

View on Github

Portals​

A Portal is how to embed a data import experience directly into your product.

Note

You don't need to embed a portal to use Flatfile. You can upload files directly to a published Portal.

Browse a few examples below with links to try in a code sandbox.

If you copy and paste into your own application, then be sure to replace the EMBED_ID with your Portal embed ID. Get the embed ID by clicking on one of your Portals in the dashboard. Note that the following code will only work for Portals in the test environment - production Portals require additional security.

HTML​

Try it in Codesandbox

Note

It is preferable to use npm install @flatfile/sdk when you are in production. The CDN package in this example is useful for trying it out in developer mode.

<html>
  <head>
    <script src="https://unpkg.com/@flatfile/sdk/dist/index.js"></script>
    <script>
      function importData() {
        Flatfile.requestDataFromUser({
          // Use your embed ID from the Flatfile dashboard
          embedId: "8074403f-d214-4a77-bc45-b181631eb6db",
          user: { id: 99, name: "John Doe", email: "john@doe.com" },
          org: { id: 77, name: "Acme Inc." },
          onData: (chunk, next) => {
            console.log("chunk", chunk);
            next();
          },
          onComplete() {},
          onError(error) {
            console.warn(error);
          },
        });
      }
    </script>
  </head>
  <body>
    <button id="flatfile-button" onclick="importData()">Import Data</button>
  </body>
</html>

Javascript​

Try it in Codesandbox

An example on how to embed Flatfile with vanilla ES6 javascript

Install the dependency​

npm install @flatfile/sdk

Implement in your code​

src/index.js
import { Flatfile } from "@flatfile/sdk";

const EMBED_ID = "8074403f-d214-4a77-bc45-b181631eb6db";

// use this wherever you need to trigger an import
export function importData() {
  Flatfile.requestDataFromUser({
    // Development mode = embedId, user, org.
    embedId: EMBED_ID,
    user: { id: 99, name: "John Doe", email: "john@doe.com" },
    org: { id: 77, name: "Acme Inc." },
    // handle submitted data
    onData(chunk, next) {
      // do something with the data
      console.log(chunk);
      // call next() to proceed with the import
      next();
    },
    onComplete() {
      console.log(`Import complete`);
    },
    onError(error) {
      console.error(error);
    },
  });
}

document.querySelector("#flatfile-button").addEventListener("click", async () => {
  console.log("click");
  await importData();
});
index.html
<html>
  <head>
    <title>Flatfile Portal Example - Javascript</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="app"></div>
    <button id="flatfile-button">Import Data</button>
    <script src="src/index.js"></script>
  </body>
</html>

React​

Try it in Codesandbox

This is a simple React example in Typescript to help you understand how Flatfile can be implemented with front-end frameworks and libraries.

Install the dependency​

npm install @flatfile/sdk

Implement in your code​

src/App.tsx
import "./styles.css";
import { flatfileImportData } from "./flatfileImportData";

export default function App() {
  return (
    <div className="App">
      <h1>Simple React Example with Flatfile (Typescript)</h1>
      <p>Notice a file named flatfileImportData.tsx imported and called on onClick!</p>

      <button onClick={flatfileImportData}>Import Data</button>
    </div>
  );
}
src/flatfileImportData.tsx
import { Flatfile } from "@flatfile/sdk";

// find this in your Flatfile dashboard after creating a new Embed
const EMBED_ID = "8074403f-d214-4a77-bc45-b181631eb6db";

// use this wherever you need to trigger an import
export function flatfileImportData() {
  Flatfile.requestDataFromUser({
    embedId: EMBED_ID,
    user: { id: 99, name: "John Doe", email: "john@doe.com" },
    org: { id: 77, name: "Acme Inc." },
    // handle submitted data
    onData(chunk: any, next: () => void) {
      // do something with the data
      console.log(chunk);
      // call next() to proceed with the import
      next();
    },
    onComplete() {},
    onError(error: any) {
      console.warn(error);
    },
  });
}
src/index.tsx
import { render } from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
render(<App />, rootElement);