The FlatfileButton Settings Property

In the previous getting started guide, the

settings
property is used with a minimal configuration. The only required keys for this settings object are
type
and
fields
, but there are more settings that while optional, do provide better data cleaning and user experience.

type

Type
string
Required
DescriptionThis option refers to the type of import you have, and can be quite helpful if you are importing different things within different parts of your application. For example, you have a client import aspect where your clients can upload products and then also an internal import process for importing company onboarding information for new clients. Using
type
, you are able to differentiate between the "products" and "company" import types.

fields

This is where you will define your schema or data model that you want to receive in your application.

Type
[ { label: string, key: string, ... }, ... ]
Required
DescriptionThe field guide will take you into more details about the options for fields, but what you need to know is that
fields
is an array of objects. Each object will be a new field and at a minimum must have a
label
and
key
as keys in the object.

title

Pass an optional title to the Flatfile Importer page.

Type
string
DefaultBulk add
type
DescriptionReplaces the primary header text when the importer is first launched. For example,
title
gets set to, "We hope you are enjoying Flatfile." You would see that title appear in the importer like in the screenshot below.
Bulk add screenshot

The default for this will display 'Bulk add ' and then the value of the type key. So if the type is type: 'products' , it will say 'Bulk add products'.


allowInvalidSubmit

Type
boolean
Default
false
DescriptionWhile this key might suggest that it will either allow or not allow a user to submit with errors in the data, the difference here is solely in the messaging provided to the user. In both cases,
FlatfileResults
will be the same (having
allData
and
validData
among others as options) and you can proceed how you see fit.
allow invalid submit screenshot

This messaging is on the final screen before submitting that reminds the user there are still invalid records. When this is set to false the user will see 'Discard x rows with issues. Submit the rest.' When this is set to true the user will see 'Submit your data anyway (errors may occur).'


managed

Control whether or not your data can be processed server-side or needs to be handled completely in the browser.

Type
boolean
Default
false
InfoIf you would like to have access to our dashboard and be able to see your files that are being uploaded there, then this will need to be set to true. This will also need to be set to true if you plan to have xml or excel files processed as these are generally too much to be handled in the browser.

disableManualInput

This setting allows for showing or hiding the manual input table that appears when the importer is started.

Type
boolean
Default
false
InfoIf this is set to
true
, then there will only be a dropzone on the page with the manual input table being hidden.

forceManualInput

Type
boolean
Default
false
InfoIn contrast to being able to disable the manual input table, you can also force the users to use the manual input table by disabling the dropzone. When set as true, this will hide the dropzone and only display the manual input table.

allowCustom

Allow users to submit fields not included in your config as a custom field.

Type
boolean
Default
false
InfoIf you would like for users to be able to add a field when submitting their data, then
allowCustom
should be set to
true
. In order to add a custom field, the user would need to type in the desired field name for the data in the matching phase.

maxRecords

Specify the maximum number of records that a single file can import.

Type
number
Default
null
InfoThis value does not include the headers of the file. So if the number of records in a file goes to row 21, but the first row is headers, then this file would be considered to have 20 records in it.

devMode

Set the importer as being in development mode.

Type
boolean
Default
false
InfoThis option is important for both testing and in any development environments you have established. If this value is set to
true
, the importer will show a "development mode" banner at the bottom, and the imports will be flagged as development imports. These imports will not be charged against your account.

styleOverrides

Style the Importer to match your brand.

Type
{ key: string, ... }
InfoThis allows for customization of the appearance of the importer. This allows you the freedom to theme the importer to be in line with your branding.

integrations

Type
{ adobeFontsWebProjectId: string }
InfoThis allows for using Adobe Web Fonts within the importer. Simply pass an object with an
adobeFontsWebProjectId
key and the typekit ID as a string and this will allow for using custom fonts in the importer.

This only makes the font available. You'll still need to set your font family in the styleOverrides config.