flatfilers
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 --saveUsing 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.jsQuickstart
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