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

Typestring
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.

Typestring
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

Typeboolean
Defaultfalse
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).'


autoDetectHeaders

Typeboolean
Defaultfalse
DescriptionThis controls whether the header selection step should be skipped if our auto-detection is able to detect the headers.

managed

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

Typeboolean
Defaultfalse
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.

webhookUrl

Provide a URL for sending data via webhook.

Typestring
Defaultnull
InfoIf you would like to process your data via webhook, you can add your webhook URL to this setting and the imports will be sent to your endpoint as they finish processing.

In order for the webhookUrl setting to work properly, you must also set the above managed setting to true.


disableManualInput

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

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

forceManualInput

Typeboolean
Defaultfalse
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.

Typeboolean
Defaultfalse
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.

Typenumber
Defaultnull
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.

Typeboolean
Defaultfalse
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.

displayEncoding

Set the importer to display encoding selection dropdown.

Typeboolean
Defaulttrue
InfoPortal displays a dropdown that allows the user to select an encoding for the file. This dropdown will default to the encoding with the most likely match from our encoding detection, but if you would like to disable the option for users to change the detected encoding, you can do so with this displayEncoding setting.

with displayEncoding: true (default), encoding dropdown is visible in Portal header matching step


ignoreColumns

Provide a list of column names to automatically ignore when present in a file.

Type[string]
Defaultnull
InfoPortal will automatically flag any columns with corresponding names provided in this array as ignored in the matching stage when these are provided. Unlike when a field is ignored by the user, however, this prevents them from being matched at all by your end user.

i18nOverrides

Sets custom text in multiple locales for the importer.

Typei18nOverrides object
Defaultnull
InfoThe i18nOverrides setting allows you to override the text in the importer with your own custom text in as many of the locales offered within the importer. By providing one or more locales with one or more keys, you will see your own custom text appear in the importer. We have an entire guide for working with this feature here.

theme

Style the Importer to match your brand.

Typeobject
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.

The above are the available theme keys. For more information on what each key controls and how to use it, visit our theming documentation.


integrations

Usage{ adobeFontsWebProject?: string, googleFonts?: string }
InfoThis allows for using Adobe Web Fonts or Google Fonts within the importer.

To use with Adobe Web Fonts, use the adobeFontsWebProject key with the typekit ID as a string value. To use Google Fonts, you need to pass in the specific font family you want to use into the googleFonts key. You can grab this by selecting the specific font you wish to use in the Google Fonts picker and then copying everything after the = in the family query paramter in the URL. Example would be copying everything in bold below and putting in the key as a string in the code example below.

Google Font URL: https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400;1,500&display=swap

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