Flatfile Vue.js Component - @flatfile/vuejs

NOTE: If you upgrading from previous versions (0.x), v3+ comes with some updates & breaking changes

BREAKING CHANGES:

Note that the latest version of @flatfile/vuejs 3+ uses the new @flatfile/sdk underneath which changes the API surface of interacting with the flatfile adapter entirely.

Read more about these changes here

There is now only 1 required input, and that is :token (which you must receive from your backend).

Read more about generating a Token here

Getting Started with Flatfile & Vue.js

We've made it really simple for you to get started with Flatfile with our new Flatfile Component. Here's what you'll need to know to get started.

First, install the dependency via npm:

npm install @flatfile/vuejs@3

This will give you access to the <flatfile-button /> component as well as the same basic functionality as our new SDK.

Simply add the import to a component where you want to include the Flatfile vuejs adapter via

import { FlatfileButton } from '@flatfile/vuejs';

export default {
  name: 'DemoComponent',
  components: {
    FlatfileButton,
  },
  // ...
}

Now in your application simply utilize this new <flatfile-button> component, but make sure to pass in the 1 required prop, (and/or any optional ones you may need for your application).

The 1 required property is

• :token (String) [ which you need to get from your backend ]

Read more here on how to implement a secure token.

<flatfile-button :token="token">
  Upload to Flatfile!
</flatfile-button>

<script>
import { FlatfileButton } from '@flatfile/vuejs';

export default {
  name: 'App',
  components: {
    FlatfileButton,
  },
  data: () => ({
    token: 'Your_Token_You_Received_From_Your_Backend',    
  })
}
</script>

Here's an example passing down many of the other optional parameters/methods available to the adapter.

<flatfile-button 
  :token="token"
  :onInit="onInit"
  :onUpload="onUpload"
  :onLaunch="onLaunch"
  :onClose="onClose"
  :onComplete="onComplete"
  :onError="onError" 
  class="ff-button"
>
  Upload to Flatfile!
</flatfile-button>

<script>
import { FlatfileButton } from '@flatfile/vuejs';

export default {
  name: 'App',
  components: {
    FlatfileButton,
  },
  data: () => ({
    token: 'Your_Token_You_Received_From_Your_Backend',
  }),
  methods: {
    onInit: function (data) {
      console.log('onInit')
      console.log(data)
    },
    onUpload: function (data) {
      console.log('onUpload')
      console.log('data')
    },
    onLaunch: function (data) {
      console.log('onLaunch')
      console.log('data')
    },
    onClose: function (data) {
      console.log('onClose')
      console.log('data')
    },
    onComplete: function (data) {
      console.log('onComplete')
      console.log('data')
    },
    onError: function (error) {
      console.log('onError')
      console.log(error)
    },
  }
}
</script>

Additional options

You can also pass down mountUrl and apiUrl to the <flatfile-button>.

<flatfile-button 
  :token="token"
  :mountUrl="mountUrl"
  :apiUrl="apiUrl"
>
  Upload to Flatfile!
</flatfile-button>

<script>
import { FlatfileButton } from '@flatfile/vuejs';

export default {
  name: 'App',
  components: {
    FlatfileButton,
  },
  data: () => ({
    token: 'Your_Token_You_Received_From_Your_Backend',
    mountUrl: 'mountUrl',
    apiUrl: '',
  }),
  // ... everything else
}
</script>

Publishing

Update changelog (if needed), update package.json version (semver), add any updates needed for README (if needed), then run the following scripts:

npm run build:lib
npm publish

Changelog

3.0.0

BREAKING CHANGES: Note that the latest version of @flatfile/vuejs 3+ uses the new @flatfile/sdk underneath which changes the API surface of interacting with the flatfile adapter entirely.

Read more about these changes here

There is now only 1 required input, and that is :token (which you must receive from your backend), more information in the link above.

Read more about generating a Token here

New methods:

The lifecycle methods have changed a bit, and below are all the available methods:

onInit | onUpload | onLaunch | onClose | onComplete | onError

2 new properties can be passed down as well are: mountUrl and apiUrl

Example of everything in action. (More info in the README also).

<flatfile-button 
  :token="token"
  :onInit="onInit"
  :onUpload="onUpload"
  :onLaunch="onLaunch"
  :onClose="onClose"
  :onComplete="onComplete"
  :onError="onError" 
  :mountUrl="mountUrl"
  :apiUrl="apiUrl"
>
  Upload to Flatfile!
</flatfile-button>

0.3.6

Fix setLang bug tempImporter.setLang is not a function.

0.3.5

Fix bug with setLang and onRecordHook not functioning properly.

0.3.4

New additions & more information / example use-case in README.

1. stepHooks & Virtual Fields

We can now create StepHooks & VirtualFields easily by passing down the props to the flatfile-button

stepHooks: {
  review: (payload, importer) => {
    // do something

    // if you want to add VirtualFields, use the importer being passed into this Function
    importer.addVirtualField({
      // ...
    })
  }
}

1. setLang

You can now setLang by simply passing down the attribute to the flatfile-button.

1. onRecordHook

You can now registerRecordHook by passing down a callback Function to onRecordHook prop (within flatfile-button).

0.3.2

Bug fix where default text from library wasn't being removed.

0.3.0

🚀🚀 Production ready 🚀🚀

• Updated to use the latest base @flatfile/adapter. No breaking changes, etc.

0.2.0

🚀 Initial release