Ask a question
In this Bubble tutorial video, I'm going to demonstrate how you can upload and import CSV data into your Bubble app. I'm going to show you two methods and talk about the pros and cons of each one.
Generating a CSV file
So I've got a spreadsheet going on in Google Workspace here, and I've already exported this and downloaded it onto my laptop as a CSV format.
Bubble CSV Upload from the App Builder
So one way that you can import CSV is as the app creator or someone who's got access to the Bubble builder, you can go into app data and you can click Upload, and then pick the file, choose the data type, and then map fields. And so it will automatically map identically labeled fields. So you can see here that I have name, email, and country. And I'm now going to manually map its email address. This is because my field in Bubble, I call the email address, whereas in my spreadsheet, I've labeled the email. So Bubble didn't make the match. But if they're labeled identically, as you saw with the case of name and country, it detects them automatically. And I will choose validate data and then upload.
And I should point out a few things as it's doing it. One is that you have to be on a paid plan or Bubble in order to do this. Another is that I'm not aware of there being a max number of entries that you can upload. I'm pointing that out because in the method I'm about to show you, there is a max number of 100 records that you can upload.
But there you go. You've got the three records imported in from the CSV. And so I'm going to delete those.
Bubble CSV Upload - Frontend Users
The second method I'm going to show you is what if you wanted your users to be able to upload data to their Bubble app? So I've got a blank page here, and I'm going to go File, File Uploader, and also add in a button, label it Upload CSV. Then I'm going to search for CSV and go Upload Data to CSV. And it's the type of contact. And the file is going to be from my file uploader. And you can see here, it gives me a warning that on the personal plan, the CSV file has to have fewer than 100 lines. So if you're needing to upload a large amount of data and you're on a personal plan, then you can do that through the Bubble app builder.
However, you will need to come up with a way of associating that data with the user if indeed the data is specific to an individual user. Whereas at least if the user uploads it, but with this limitation here, you can associate that data to their account. So let me preview that. And I'm going to warn you ahead of time, we're going to get an error. So my file is uploaded. And then if I click Upload CSV, we get an error saying that column email does not match with the field of the chosen type. And that is because, as I pointed out earlier, I have the field labeled as email in my CSV file. But in Bubble contacts, it is email address. And so when you are allowing users to upload from the front end, the field names need to be identical.
At least when you're using Bubbles's built in CSV upload and import tool that I've just demonstrated, there are some plugins available on the Bubble plugin store, directory, that allow you to get your users to match fields on the front end. So I'm just going to try, I'm not sure if this will work, if I make it identical now, then go back to my demo, upload my file, contacts, upload CSV, and there you go.
That goes all the way through. So let's check in data. We've got our entries there. So that's something to look out for is if your users are uploading data with CSV. And this isn't very uncommon that you may have to create as the app builder a template that your users follow. Because if they don't match those fields identically, then the whole upload will fail. You need to have identical fields from the header row of your CSV compared to your Bubble data type in your Bubble app. So there you have it, two different ways to upload CSV files to your Bubble app.
Need more flexibility with Bubble and CSV files?
Now, if that is too limiting, there are services out there that their whole purpose as a third party service is to help a user upload a CSV file and refactor it, reformat it, match up fields. Services such as CSV Box or Flat File or Use CSV. These are not services that are that I've tested, but they're ones that I've got on my radar as recently I've been working with a client where a lot of data is being processed and uploaded via CSV. If you have any comments, video suggestions, please leave them in the comments section below.
If you'd like one to one help with anything in your Bubble app, you can reach out to us through our website and book a one to one Bubble coaching session with one of our Bubble experts.