2 Ways to Bubble CSV Upload

Importing CSV Data into Bubble

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.

Method 1: Importing CSV via App Data

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. 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 AppData and you can click upload and then pick the file, choose the data type and map fields. It will automatically map identically labeled fields.

You can see here that I have name, email and country and I'm now going to manually map it to email address. This is because my field in Bubble I call the email address whereas in my spreadsheet I've labeled it email, so Bubble didn't make the match. If they're labeled identically as you saw with the case of name and country, it detects them automatically. I will choose validate data and then upload.

Important Points to Note

I should point out a few things as it's doing it. One is that you have to be on a pay plan of 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 this out because in the method I'm about to show you there is a max number of a hundred records that you can upload.

Method 2: User-Initiated CSV Upload

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. I've got a blank page here and I'm going to go file file uploader and also add in a button labeled "upload CSV". Then I'm going to search for CSV and go upload data to CSV. It's a type contact and the file is going to be from my file uploader.

You can see here it gives me a warning that on the personal plan, the CSV file has to have fewer than a hundred lines. So if you're needing to upload a large amount of data and you're on the 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 individual user if indeed the data is specific to the individual user.

Troubleshooting CSV Upload Errors

Let me preview that. I'm going to warn you ahead of time we're going to get an error. My file's 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. 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.

When you are allowing users to upload from the front end, the field names need to be identical, at least when you're using Bubble'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.

Successful CSV Upload

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. Let's check in data, we've got our entries there.

Important Considerations for CSV Uploads

That's something to look out for: if your users are uploading data with CSV, and this isn't too uncommon, you may have to create as the app builder a template that you'll use as 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.

Alternative CSV Upload Services

If that is too limiting, there are services out there whose 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 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.

Conclusion

If you have any comments or video suggestions, please leave them in the comment section below. If you 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.