Bubble.io Tutorial - Save files externally on Google Drive with Zapier

Step-by-step instructions for saving files to Google Drive or Amazon S3 from Bubble using Zapier.

Chris Strobl
Chris Strobl

In this tutorial, we will store files such as images or documents externally on Google Drive. We use Zapier for this purpose in order to use a no-code solution for the integration. The approach is analogously applicable to Amazon Web Services S3 or storage solutions such as Dropbox.

German Bubble Tutorial - Store data on Google Drive/AWS S3 with Zapier

Video transcript

Hello, my name is Chris Strobl and today I'm going to show you how we can save pictures that we have in our Bubble App in Google Drive and we do that via Zapier. We'll get started straight away and take the Picture Upload element. And below that we have an input field where we enter the name. And a button. Upload Picture We go into Data, create a new Data type. Picture and this has three fields, one is Picture Name. That's a text, one is the picture itself, that's an image of type and the picture URL.

This is also a text. If we now go into the workflow, Start/edit workflow. Create a new thing an image. And the image name is in the name value. Now the second step is Make changes to a thing and we take Result of Step 1 and the image URL. Let's do https:. And Insert Dynamic data, result of Step 1. image. And the URL. The URL in Bubble is displayed with an S3.Amazon.com.

That is, if we have https in front of it, we come directly to the right URL afterwards. Then we go to Plugins. And install the official Zapier plugin from Bubble, which is not legacy, but the new plugin. You install this. And we now see Add another Zap Trigger here. You click on it and we call this Google Drive upload. And the trigger type is an image. Now this is currently not active. We're going to go back into Workflow Plugins Trigger a Zapier Zap. And take here. Result of Step 1.

And finally, reset relevant inputs. If you now go into Zapier, create a new Zap there. First we look for Bubble. So the trigger. And we can now set a new workflow trigger event here. You have to log in to Bubble if you are not already. Then a field will open here. I am already logged in to Bubble. Then select the App ID. And the App Version, so whether this is the Live Version and the Development Version and the Zap. ID. Now you have this new ID here and you do Continue. If you now go to Test trigger, you will get an error message because the Data API is not exposed. For this you have to go to Settings, API and Enable Data API. And now you have to publish it for the picture. You can also go back to Privacy and check whether the image itself is visible and not restricted.

We go back into Zapier and test the trigger again. And we now get data from Bubble Standard here. Here we go to Continue. And we select Google Drive as the second application. And we did Upload file here. Next, we log into Google Drive. And select the folder Zapier Image Uploader that has already been created. Now you can select File under all options, we have the image URL here. If you take the image directly, there are sometimes problems and it uploads a text instead. But if you have the image URL, it works in any case. And Convert to document false and the file name, we take the image name, which is a text field. Then we press continue. And because of the demo data, we won't see an image. But nevertheless we have to do the test once to activate the whole Zapier integration.

You can also skip the test. Personally, I feel better when I do it. We see that the test was successful and so now we also have this Lorem Ipsum text field in Google Drive, which is more or less the demo data. You do turn on Zap. And we're now going to test what happens when we try out the application. We now click on Upload an image. You take this cover. Name the image Porsche 911 and press Upload Image once.

Once we go into the database, that is Data App data, then we see the URL here. But also the image name and the image itself. If we then go into Zapier Google, we see that we have uploaded the image and at the same time also have the image name.

That means that our upload in the application has led to the fact that we have the data in Bubble on the one hand, but at the same time we have also uploaded the file to Google Drive. The great thing about Zapier is that you also have completely different integrations here. Whether it's Amazon S3 or Dropbox or completely different services. This means you can integrate wonderfully between Bubble and Zapier and almost all possibilities are open to you. And the whole thing without having to programme it yourself.

If you liked this video, click on the Like button and subscribe to the channel. This in turn helps us to get more reach. This makes it worthwhile to continue offering even more free content. If you have any questions, feel free to write in the comments. Until then, I wish you continued success and see you soon.

Plugins