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:
- Check if mandatory fields are filled and if not, show the users which ones are missing.
- Let the user check the data before the entries are created.
- 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:
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.
- Create an upload functionality using the standard bubble.io uploader
- 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.
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.
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.
I fill this list with the uploaded data.
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.
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.
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.
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 😉
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.
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:
- Reduce the database operations to a limit to save performance
- 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.
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.
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“.
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.
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.
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.
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.
I'm Sarah, and I've seen quite a bit in my time in the IT industry. Right at the beginning of my career as a consultant, I developed a feel for my clients' needs. Later, as a software development team leader, I brought various digital products to market.
I find relaxation deep underwater. I am a passionate diver and do not shy away even from icy mountain lakes.