How to save an image from a URL | Bubble tutorial

Follow me:

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.

Support the site and keep it free ❤️

I love tech startups and the Bubble community, and have made it my mission to try and create content that’s valuable, easy to follow and entertaining.

Creating content next to full-time consulting work is time-consuming; if you’d like to support it and keep the site free for everyone, please consider buying me a coffee or becoming a supporting member.

Buy Me A Coffee

Follow me:
Bubble.io books

Learn Bubble the right way

Our professional Bubble books teach you how to plan, structure and build your applications right from the start.

5-star review stars

More Posts

Leave A Reply

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


Email icon

Useful articles and tips

Join the mailing list to get guides, opinions and articles on Bubble, no-code, automation and the tech industry.

We don't share your email address with anyone, and you can unsubscribe at any time.

You have successfully subscribed