Flatfile’s data onboarding platform: From static to dynamic configurations

When working with Flatfile’s data onboarding platform, there are a few different setup details that are required in order for it to work. You need a license key, a configuration which includes the type of import and the fields, and you must identify the customer.

But what if I have different users and each user could potentially have their own unique fields? Will Flatfile still work for me? The answer, of course, is yes, but in the case where Flatfile needs to be dynamic, you have to ensure the user information and any different field configurations are set in your application before initiating the importer. Let's take a look at a static setup and then move on from there.

In this example, you can see that we have multiple schemas set up in the code, but we don't have anything to make it dynamic. If we added some sort of prompt in this same setup, the code would still run through and things like the fields and customer might be undefined when we run that part of the code. That means, we need to either call the code later after we have some sort of user input (which we will do below) or we need to force the setup to wait until we have user input or (more likely in this scenario) the details about the user back from our server by using Promises.

Let's start with the easier method below to visualize how we can simply put the new FlatfileImporter call inside of the click function.

What we have done in the above code is given the application a way to identify the end user/customer, and we've put the importer inside of the "click" function which means that until the user clicks to start the upload, we aren't locking in the fields or customer information.

The TL:DR

• When you initiate the Flatfile Importer (using new FlatfileImporter) you lock in the schema for that import reference.

• If you try to call the setCustomer() or requestDataFromUser() methods before initializing the importer, there will be an error.

• If you need to pass in the fields and/or customer information dynamically, you need to wait until you have the information you need before initializing the importer by either doing the above and initializing on import or by using Promise chaining to wait for data to come back from your server.

Want to dig into the code? We have this working in a CodeSandbox here.