Importing data (CSV)
Bubble has a built-in feature to upload CSV files and import its data to the database. In this article, we'll cover how to perform this operation, as well as how to format the CSV file correctly to prepare it for uploading.
This article explores the built-in CSV tool in the Bubble editor. If you are looking for how to allow your users to upload a CSV file in your app, see the core reference section below:
Reference: Upload data as CSV
How to import a CSV file
Formatting the file
The file needs to be of type CSV (comma-separated values), which you can export from apps like Microsoft Excel, Google Sheets and Apple Numbers.
To ensure Bubble accurately interprets the data in your file, it's important to format it correctly. Most fields follow standard formatting conventions, though certain complex types, such as date ranges and intervals, may require specific formatting to be recognized properly. The first row of your CSV file must be a header row containing the names of the fields for the data.
| Field type | Example | Note |
|---|---|---|
date | Jan 1, 2030 9:00 AM | |
date interval | 86400000 | Milliseconds (i.e. 86400000 is 24 hours) |
date range | [Jan 1, 2030 9:00 am, Jan 1, 2030 10:00 am] | Comma-separated dates. The first must be before the second. Note the brackets. |
file | //7061a23464c269152da77797cd07e457.cdn.bubble.io/f1702555059736x137960774747504450/Bubble%20logo.svg | The URL to the file |
geographic address | 20 W 34th St., New York, NY 10118, USA | The address as formatted in Google Maps |
image | //7061a23464c269152da77797cd07e457.cdn.bubble.io/f1702555059736x137960774747504450/Bubble%20logo.svg | The URL to the image |
number | 123456 | |
text | Lorem ipsum | |
yes / no | yes | yes or no (don't use true/false) |
custom data type | 1702555073152x152492144645599780 | Unique ID of the thing you are linking to |
Note that in the file you want to import, the rows and columns are transposed. Yo
Metadata contained in the following fields is automatically created and updated by Bubble and is not possible to import from a CSV:
Unique ID
Creator
Modified Date
Created Date
Slug
If these fields are included, they will be automatically set to ignore this column.
Accessing the import feature
The CSV import feature is found in the Data - App data section of the Bubble editor. After navigating there, click the Upload button.
The import popup
To successfully import the file, you need to keep the popup open until the file has uploaded. When the second progress bar (Processing file) is visible and starting to fill, you can close the popup and keep working in your app.
The import popup will be displayed, where you can set the correct settings for the import:
First, select the data type that you want to import. Note that we have named the data type CSV in the example.
Pick the data delimiter. This is the character that separates the data, so that Bubble understands its rows and columns. The comma is the most widely used, but the delimiter can be one of the following:
,
;
tab
|
Select the file to upload from your device (opens system file browser)
Map fields: Bubble will attempt to match the columns in the file with the correct field on the selected data type. In the example, we have named the fields according to their type of data.
Choose delimiters on fields: some fields, such as date ranges, need a valid delimiter. This is normally a comman, but the characters listed in point 2 are all valid.
Validate the data: the next step is to instruct Bubble to check the data in the file against the fields you have mapped. If successful, you will get a success message. If there are any errors, they will be listed after you click the Validate data button.
FAQ: CSV import
Can you upload more than one data type at a time?
You can only upload one data type at a time.
Can I create new fields on the data type based on columns in the file?
No, all fields must be created and have matching names before they are uploaded.
Last updated
