Flatfile.io CSV Importer Adapter

A simple adapter for elegantly importing CSV files via flatfile.io (Typescript, ES6, Browser)

Read the developer docs → https://developers.flatfile.io/docs/install

License Key

In order to setup, you need to create or sign in to your flatfile.io account and obtain a license key.

Using NPM

If you don't like external dependencies, or you have a nice build system like Webpack in place. You can install and use Flatfile as an npm package.

npm install flatfile-csv-importer --save

Using CDN

The latest version of the package is available via CDN so you can just drop it into your website and start using it.

https://unpkg.com/flatfile-csv-importer/build/dist/index.min.js

Quickstart

Add the following code before the ending </body> tag in your html.

<script src="https://unpkg.com/flatfile-csv-importer/build/dist/index.min.js"></script>

<script>
  var LICENSE_KEY = 'PASTE YOUR KEY HERE'

  var importer = new FlatfileImporter('demo-account', {
    fields: [{
      label: 'Robot Name',
      key: 'name'
    }, {
      label: 'Shield Color',
      key: 'shieldColor',
      validator: /^[a-zA-Z]+$/
    }, {
      label: 'Robot Helmet Style',
      key: 'helmetStyle',
    }, {
      label: 'Call Sign',
      key: 'sign',
      alternates: ['nickname', 'wave'],
      validator: /^\w{4}$/
    }],
    type: 'Robot'
  })

  importer.requestDataFromUser().then(function(results) {
    importer.displayLoader()

    // replace this setTimeout with an ajax request to your server with the data
    doSomethingWithYourData(results.data).then(function() {
      robotImporter.displaySuccess()
    })
  })

  /**
   * Use this function to do something with your data like upload it your server
   * 
   * @param data An array of objects matching your earlier configuration
   *   [
   *     {
   *       name: 'R2D2',
   *       shieldColor: 'blue',
   *       helmetStyle: 'awesome',
   *       callSign: 'beep'
   *     }
   *     ...
   *   ]
   */
  function doSomethingWithYourData (data) {

  }

</script>

ES6 / Babel

import FlatfileImporter from 'flatfile-csv-importer'
import $ from 'jquery'

// configure your flatfile options here
const options = {}

// Obtain your license key from https://flatfile.io
const LICENSE_KEY = 'PASTE YOUR KEY HERE'

// initialize the importer
const importer = new FlatfileImporter(FLATFILE_LICENSE_KEY, options)

// setup your handler
const buttonClickHandler = async () => {
  try {
    const response = await importer.requestDataFromUser()
    await uploadYourData(response.data)
  } catch(e) {
    // handle a failed upload
  }

}

const uploadYourData = (data) => {
  // logic here to upload the clean data your server
}

$("#upload-button").click(buttonClickHandler)

Promise Overrides

Flatfile includes a basic native compatible Promise shim for IE support. You can override this with your preferred library by using the following global setting:

FlatfileImporter.Promise = Bluebird.Promise