Connecting Retool to Google Cloud Storage: A Step-by-Step Guide

Prerequisites

Before proceeding, ensure you have a Google Cloud project set up with billing enabled and the necessary permissions to create and manage resources.

Goals

In this guide, we'll establish a secure connection between Retool and Google Cloud Storage for image uploads, like gif video below:

Creating service account key

If you don't already have a service account set up for Cloud Storage access, follow these steps:

• Navigate to the IAM & Admin section of your Google Cloud project and locate the Service Accounts tab. Click on Create service account.

• Provide a descriptive name for your service account and leave the optional fields blank for now. Click Done to create the account.

• Go to IAM and click on Grant access to grant permission to current project for service account.

• Get the email for your service account you have just created above and paste it into New principles, assign role Editor to that account and then click Save.

• Navigate back to the Service Accounts tab. You'll notice your newly created account doesn't have a key yet.  We'll need to create one.

• Click on your created service account and under the Keys tab, select Add key and choose Create new key. Download the key in JSON format and save it securely in a location accessible to your Retool application.

Assigning full control access to a Google Cloud Storage bucket for service account

If you don't already have a bucket for your data, you'll need to create one. You can do this within the Google Cloud Storage console.

• Navigate to your desired bucket and locate the Permissions tab, click Grant access.

• Paste the service account email address in the New principals field. Under Assign roles, select Storage Object Admin to grant access. This allows the service account to list, create, view, and delete objects (files) within the bucket. You can choose another role based on your specific needs.

Setting Up the Resource Connection in Retool

Now, let’s set up the Google Cloud Storage resource connection in your Retool application.

• Log in to your Retool workspace and navigate to the "Resources" tab. Click "Create new" and select "Google Cloud Storage" from the list of integrations.
• Complete the resource setup in Retool:
  • Resource Name: Provide a descriptive name for your resource, such as "Google Cloud Storage Connection".
  • Service Account Key: Locate the json file you downloaded earlier containing your service account key and paste its contents directly into the text box.
  • GCS Bucket: Enter the name of the Google Cloud Storage bucket you created earlier. This will allow Retool to access and manage data within that specific bucket.

After completing the resource setup, proceed to validate the connection by clicking the Test connection button. If the connection is established successfully, a message indicating "Test connection successful" will appear, then click Create resource to finalize. This connects your Google Cloud Storage for in-app data management.

Uploading an image to Google Cloud Storage from Retool

We have completed all the setup steps and now we will try to upload an image to the bucket we created on google cloud storage from Retool.

• Navigate to the Retool application where you want to implement the image upload functionality and add a "File Input" component to the page.

• Create a query to upload the image:
  • Add a resource query to the page, select the "Google Cloud Storage Connection" resource you created earlier.
  • Choose the “Upload data” operation.
  • In the "Bucket name" field, enter the name of the Google Cloud Storage bucket where you want to store the image.
  • Specify file name, file data, Content-Type as “Binary”.

• Click the "Run" button, eager to upload your image, but... wait! An error message pops up.

The error you're encountering stems from the absence of a CORS (Cross-Origin Resource Sharing) configuration on your Google Cloud Storage bucket. CORS acts as a security gatekeeper, restricting access to your bucket's resources from external domains. Since Retool is considered an external domain, it's currently blocked from interacting with your bucket.

To resolve this issue, we need to set up a proper CORS configuration for your bucket. Here's how to do it:

• Create a JSON file with the CORS configuration:

[
    {
      "origin": ["https://<APP>.retool.com/"],
      "method": ["GET", "POST", "PUT", "DELETE", "HEAD"],
      "responseHeader": ["Content-Type", "x-goog-acl"],
      "maxAgeSeconds": 3600
    }
]

• Use the gcloud command with the --cors-file flag:

gcloud storage buckets update gs://BUCKET_NAME --cors-file=CORS_CONFIG_FILE

• Where
  • BUCKET_NAME is the name of the relevant bucket. For example, retool-blog.
  • CORS_CONFIG_FILE is the path to the JSON file you created in Step 1.

Now, click "Run" again to upload your image. It should successfully appear in your Google Cloud Storage bucket.

Congratulations! You've successfully established a connection between Retool and your Google Cloud Storage bucket. This means you can now upload images directly from your Retool application.

Get in Touch

Ready to bring your dashboard vision to life? Contact Retoolers today, and let us help you create a powerful, intuitive dashboard that meets your exact requirements.