If you’re looking for an external storage solution for your Bubble app, Wasabi is one option worth considering. It’s currently one of the cheapest file storage solutions available and is relatively straightforward to integrate into your Bubble app.
This post will outline how you can integrate Wasabi into your Bubble app and securely upload files to a Wasabi bucket.
Steps involved
- Register for a Wasabi account and create a new user
- Create a new Wasabi bucket
- Connect your Bubble app to Wasabi
- Add a file dropzone to your Bubble app
- Upload files to Wasabi using presigned URLs
Bonus tips
- Warm server side actions to avoid a delay
- Show the user an upload progress bar
1. Register for a Wasabi account
Head over to the Wasabi website and sign up for an account. Once you’ve completed the registration process, click on the Users button in your Wasabi dashboard to create a new user.
Click on the Create User button:
Pick a username and select Programmatic (create API keys) for the Type of Access:
For step #2, you can assign the user to a group if you want, but this is not necessary. It is important that you attach a policy to the user so that you will be able to perform the necessary operations from your Bubble app (i.e. upload files, download files, delete files etc.) - you can use the AmazonS3FullAccess policy for this.
Click on Next and finally create the user by clicking on Create User:
You’ll be shown a popup with your Access Key and you’ll also have the option to show your Secret Key. Make a note of both of these keys - you will need them shortly to connect Wasabi to your Bubble app.
2. Create a new Wasabi bucket
Navigate back to your Wasabi dashboard and go back to the ‘Buckets’ tab. Create a new bucket by clicking on the Create Bucket button:
Pick a name and region for your bucket. There are a couple of things to keep in mind when picking a region for your Wasabi bucket:
Latency and performance: If most of your users are based in the US it may make sense to pick a US location for your bucket as, in general, the closer your users are to the bucket region the quicker the upload/download speeds.
Compliance and data residency: If you need to comply with specific regulations (like GDPR) you may be required to store files in a specific region*.
You can choose the default options for steps #2-6 and then create your bucket by clicking on the Create Bucket option:
3. Connect your Bubble app to Wasabi
There are a number of ways you can connect your Bubble app to Wasabi - I’ll be using Cranford Tech’s CT File Uploader plugin to do so in the rest of this post. You’ll need to install the plugin from the Plugins tab of your editor and then add the Access Key and Secret Key you got in step 1 to the relevant fields in the Plugins tab:
Please note that you will use the same keys for both dev and live versions of your app.
You’ve now connected your Bubble app to Wasabi!
4. Add a file dropzone to your Bubble app
In order to upload files to Wasabi, you’ll need to add a file dropzone element to your app. The CT File Uploader plugin comes with a CTFileDropzone element that can be used for this purpose:
IMPORTANT: You must set the Type of Added Files to ‘Dropzone File (CT File)’ in order for the plugin to work properly:
You can customize the look and feel of the CTFileDropzone and also restrict the number / type/ size of files that can be added to it.
If you want to show the user details on the files they’ve added to the dropzone, you can add a repeating group below and set the type of data to be CTFileDropzone A’s Dropzone files:
You can then access the file’s name, size (in KB) and an icon representing the file type to get something like the following:
5. Upload files to Wasabi using presigned URLs
To upload files added to the dropzone to Wasabi, you can use presigned URLs. A presigned URL is a temporary, secure URL that allows users or applications to access a private object in a Wasabi bucket. In this case, it will be used to upload a file to a Wasabi bucket.
The CT File Uploader plugin comes with an action called Get presigned URLs (upload) that generates presigned URLs for the list of files added to the dropzone.
In the below example, we’re adding the Region and Bucket Name as static values and then using the file_name of EACH file added to the dropzone.
Note on time it takes to generate a presigned URL: If you’re running the Get presigned URLs (upload) action for the first time in 10-15 minutes, you may notice a slightly delay. This is because of a cold-start that occurs with all Bubble server side actions that are run for the first time (in 10-15 minutes). You can avoid this delay by using the Warmup - Wasabi action that comes with the plugin - see bonus step #1 below for full details.
Once you’ve generated the presigned URLs, you can use the Upload files using presigned URLs action to upload the files to Wasabi:
You should see your files appear in your Wasabi Bucket:
Bonus tips:
1. Warming server side actions
As mentioned in step #5, Bubble server side actions can experience a ‘cold start’ which causes a 10-15 second delay if you’re using the action for the first time in 10-15 minutes (this can vary). The CT File Uploader plugin comes with two server side actions that can be subject to this delay:
- Get presigned URLs (upload)
- Get presigned URL (download)
In order to avoid this potential cold start issue, you can run the ‘Warmup - Wasabi’ action on page load to establish a connection between Bubble and Wasabi:
You can see the ‘Warming server side actions to speed them up’ section in the CT File Uploader’s demo app for full details and a working example.
2. Showing the user an upload progress bar
If your users are going to be uploading large sized files to Wasabi (EG video files) you may to show a file upload progress bar so it’s clear how much of the upload has been completed.
You can do this by:
- Adding a repeating group beneath the CTFileDropzone and setting the type of content to be Dropzone File (CT File)
- Add a text element and add the dynamic content Parent Group Dropzone File (CT File)’s upload_percentage
This will show a number representing the upload progress (in percentage terms)
- You can use a progress bar plugin that takes a dynamic value as an input and reference the upload_percentage
Now when a user adds a file to the Dropzone, they’ll be able to see the file upload progress:
You can see the ‘File upload progress’ section in the CT File Uploader’s demo app for full details and a working example.
- Nothing in this post should be considered legal advice on complying with any data regulation (GDPR or other)
