Bubble.io Tutorial
Sarah Berger

How to create a custom CSV upload element with bubble.io

There are many situations where you want to give users the possibility to upload a bulk of data at one time with a CSV file. Even though there are from a technical perspective other ways to do this (e.g. with APIs) CSV files are still very common in many applications. Therefore, I needed a way to develop a CSV upload functionality in bubble.io.

Problems with current CSV upload functionality

I had the same requirement when developing a new application. The user should be able to upload a CSV File with a certain set of rows that represent searches he wants to place in the application. As I'm using bubble.io I was looking for a smart and lean way to do this. There are many tutorials out there on how to upload a CSV file, but none of them actually solved my problem. They just show you to make some clicks in the workflow to create new things based on the CSV file. This wasn't sufficient for me.

I didn't just want to have a simple CSV upload. I wanted more. The following list shows my actual requirements for the CSV upload in bubble.io:

  1. Check if mandatory fields are filled and if not, show the users which ones are missing.
  2. Let the user check the data before the entries are created.
  3. Let the user choose which of the uploaded objects he really wants to add (in my case, the searches).

In my head, the functionality should have looked like the following:

Custom CSV upload in Bubble.io
Custom CSV upload in bubble.io

So far, there were no tutorials out there. That's why I created this one.

Steps to develop your custom CSV upload in bubble.io

Prerequisites: In order to fully understand this tutorial, you need to have a certain knowledge of states and backend workflows. On top of that, you will need some expertise in bubble.io.

Set-up - required data modelling before we start

The object you want to create (in my case, searches) needs to have at least one field called "Status". The different statuses can be easily added with an option set, while the options must at least be "Uploaded", "Current". You can name them however you want.

Task 1 - Provide a simple way to upload the CSV file

This is the very easy part, for which you can find tons of videos on YouTube. You need to provide the user the possibility to upload the files and execute the CSV Upload workflow. I divided this into two parts.

  1. Create an upload functionality using the standard bubble.io uploader
  2. Create a button to schedule the workflow of uploading the CSV data

Task 2 - Modify the workflow of uploading the CSV file

Now comes the field where it gets more interesting. Below, you can see the workflow for the button where the user clicks on to upload the CSV File he uploaded while using the file uploader from bubble.io.

Workflow for custom CSV Upload in Bubble.io
Workflow for custom CSV Upload in Bubble.io

So what does happen here? The first process step (Step 1) just describes that the data should be uploaded. You need to specify which type of data you actually are going to upload where the CSV file is stored. In our case, the file uploader holds the CSV file. Nothing special here.

Upload Data as CSV in Bubble.io
Upload Data as CSV in bubble.io

The next step (Step 2) resets relevant inputs. This is required only if you want to have the file uploader being reset. Not required in this case.

In Step 3 we are setting the state of the Pop-Up with a list of searches (in my case). This state contains all the objects I have uploaded. Why? Because we want to show this list in a repeating group, and we will need them later for cleaning. In order to do this, I have the Popup a custom state called "Upload_Searches" this custom state is a list of searches (the actual thing in the database). In the picture below, you also see the custom state "Selected_Search". I will come back to this later.

Create custom states for the CSV upload
Create custom states for the CSV upload

I fill this list with the uploaded data.

Set custom state with uploaded data for CSV upload
Set custom state with uploaded data for CSV upload

In the next step (Step 4) we need to give all uploaded objects (in my case searches) a specific status. In my case, I called this status "Uploaded". Some of you might argue that this step is not required, as you can set the default value to "Uploaded". Depending on the application, this is correct. But, in my case I wanted to give the user the possibility to create searches with the application and with the CSV upload, and they will be handled the same. That's why, in my case, this didn't make sense at all.

In easy words, with this workflow, I'm saying that all uploaded objects have the status uploaded. I need to "flag" these searches in order to clean them up later.

Give all uploaded objects a certain status.
Give all uploaded objects a certain status.

Task 3 - Show the uploaded data in a repeating group

The goal of this exercise is to show the user, which data he actually uploaded and also give him the possibility to select which ones should be "really" saved in the database. Technically they are already uploaded, but we don't have to tell ;)

This is a very easy task, create the repeating group and use the custom state we have filled with data in step 3.

Fill the repeating group with the uploaded data
Fill the repeating group with the uploaded data

Task 3.1 - Show mandatory fields (optional)

One reason why I wanted this feature so badly, is because I need to have mandatory fields when creating new searches. While the user is creating new searches in the application itself, I can control the whole process and let them only create new searches if certain fields are filled in. However, with the CSV upload, I can't. But with this solution, you can come up with a workaround.

Therefore, you need to select the cell of your repeating group and mark a certain text if this field is empty. This text can be anything you want, but it should clearly show the user that this data is missing. On top of that, you can also use checkboxes in order to show the user that mandatory fields are missing, and new searches cannot be added.

Go into every text field (which should be mandatory) you are presenting in the repeating group and work with conditions. If a certain condition is met, a hint for the user is shown.

Display mandatory fields
Display mandatory fields

Task 4 - Create Checkboxes to let the user choose

One requirement was that the user should actually choose, which of the uploaded searches he really wants to add. I chose the possibility of checkboxes so that the user can check, which searches should be added. Another requirement was that the user can't add new searches if not all required fields are filled in. I can easily control this with checkboxes.

The first step is to create a checkbox in your current cell in the repeating group. The next step is to work again with conditions to disable the input of the checkbox if required fields are not filled in. In my case, there are only two fields, which are mandatory. You can combine them however you want - the sky is the limit ;)

Add checked or remove unchecked searches to a custom list

Task 5 - Create a new list of selected searches

The next task adds or removes the selected searches to a custom list. We want to give the user the possibility to add and remove selected searches while using the checkboxes. We also want to avoid too many operations. That's why we are working with states again. If you have no idea of states, you can imagine it like a list of items we are holding in the application but not yet in the database. We only want to change something in the database if the user did a certain action (in our case, click the button "Add Searches").

We are creating the second state for the Pop-Up calling "Selected_Searches". You can name as you want. This is also a list of searches.

Create custom states for the CSV upload
Create custom states for the CSV upload

Task 6 - Add or remove new searches with checkboxes

In order to start with this task, you need to complete task 5 first, otherwise, it won't work. What we want to do now is to add or remove searches in our custom list. We need this custom list, later on, to change the status in the database. You may ask yourself why we don't change it directly in the database once a user checked or unchecked the checkbox. There are two reasons against it:

  1. Reduce the database operations to a limit to save performance
  2. The user anticipates that changes are only done once he clicked the button "Add Search". Maybe he checked one checkbox and closes the Pop-Up because he isn't sure. He wouldn't notice that the actual change has already happened.

We need to have two workflows for this, they are very straightforward. One if the checkbox is checked and one if the checkbox is unchecked.

Workflow for Checkboxes
Workflow for checkboxes

For the first workflow, we are basically saying that this search should be added to the custom list of Selected_Searches. In the second workflow, we are saying that it should be removed.

Add or remove searches to the custom CSV upload

Task 7 - Change status of selected searches for CSV upload

Imagine the user has been working with this wonderful feature. He was able to select the searches he really wants to add. As the searches are already uploaded and have the status "Uploaded" we need to change this status. Why? Because we only want to work with the searches selected and not with all uploaded ones.

This sounds complicated, but it is very easy.

Go to the workflow which starts once the user clicked on the button "Add Searches".

Workflow for the button clicked to add searches
Workflow for the button clicked to add searches

Now you use the functionality to change a list of something. In my case, searches. We select all the searches which are in our custom list of "Selected_Searches". Remember, this list contains only the list of searches that were selected.

Change the custom list of selected searches
Change the custom list of selected searches

Task 8 - Clean up work

No one wants to clean up, I know. But in order to keep your database clean, we need to delete the searches which were uploaded but not selected. Otherwise, you will have tons of unused searches in your database. There are many ways to do this. The first one is to schedule a monthly/weekly/daily workflow. With personal plans, you can do only monthly scheduled workflow. That's why we came up with a workaround.

We are scheduling a custom workflow once the searches are uploaded with a given time frame. In our case, we say 30 minutes, but this is completely up to you. What does that mean? That means that 30 minutes after the searches were uploaded, this workflow comes into action. It is our clean-up workflow. This workflow belongs to the action where the user clicks the button to upload the data.

Schedule a backend workflow to clean up the data
Schedule a backend workflow to clean up the data

What you can see here is that we are scheduling the backend workflow "delete search in given status". We are also saying that the workflow should run on the list of uploaded searches with the status "Uploaded".

The next picture shows the parameter of the backend workflow. We only need the search and the status.

Parameter for backend workflow to clean up the data
Parameter for backend workflow to clean up the data

The actual deletion of the uploaded but not selected searches
The actual deletion of the uploaded but not selected searches

Task 9 - Celebration

You made it ;) Without a plug-in, just with simple logic and the functionalities bubble.io gives you. If you need help with the development of your bubble.io application, check out our services or contact us directly.

Du hast Fragen zu diesem Thema?

Kontakt aufnehmen
Biberei Icon


No Code

Lass uns über dein Projekt reden

Erzähle uns in einem kostenlosen Erstgespräch mehr über dein individuelles Projekt. Wir helfen dir bei den nächsten Schritten und teilen unser Wissen.

Nachricht schreiben