How to save an image from a URL | Bubble tutorial

Uploading an image to Bubble is easy, but sometimes you need to save an image from a URL and save it to your server. Adding an image field to a Data Type in Bubble doesn’t actually add an image on its own, but just a URL leading to an uploaded image. In other words, if you try to save an image from an external URL, you’ll simply save the URL, and not actually upload the image.

Luckily, this is easily solvable, by using the :saved to S3 operator. This operator takes the image in any provided URL, uploads it to your own Bubble app’s S3 server and saves that link instead.

Total Time: 2 minutes

Add the URL to an ImageUploader

Adding a dynamic URL to an image uploader in Bubble

In this example, we’ll borrow the Google’s logo from their website. Start out by adding an ImageUploader element to your page. Double-click the Uploader to see it’s properties, and then set the field Dynamic image to any image URL – in our example the URL is https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png.

Create an action for saving the image

Adding a workflow to a button in Bubble

For the next step, add a Button element to the page. Double-click it to see its properties and click the Start/edit workflow button. You’ll be taken to the workflow editor.

Add a step in the workflow using the Make changes to a Thing action, and pick whichever Thing you want to save the image to. In our example, we’ll save it as the Current User avatar.

Click the :saved to S3 option

The :saved to S3 operator in the Bubble workflow editor

Now, you reference the ImageUploader’s value to set the Current User’s avatar, but after that step you add the :saved to S3 operator. This tells Bubble to upload the selected image to your app’s server instead of simply saving the URL.

This is part of our Bubble quick tips section – click for more tutorials.

Share:

More Posts

Understanding Bubble Groups

Bubble has five different group types. While they’re all used as containers, their use differs greatly. This article explains the difference between them in detail.

Bubble’s new expressions: SPLIT BY and ARBITRARY TEXT explained

Bubble quietly launched two new features in July 2021 that are quite useful: split by and arbitrary text. They’re both expressions that solve tiny problems that otherwise would require cumbersome workarounds, and are absolutely worth checking out. You’re not gonna

Combining icons and text in Bubble

Placing icons inside of your text elements by using BBCode is a quick way to reduce the total number of elements on your page and make sure your app runs smoothly. Read on for how to do it.

Leave A Reply

Your email address will not be published. Required fields are marked *

*