LogoLogo
Back to studio
  • 🧠Core Concepts
    • Introduction to Formsort
    • Formsort quickstart guides
      • Add content and collect answers
      • Capture demographic data
      • Add informational content
      • Template your variables
      • Add conditional logic
      • Using conditional logic with Calculated and API variables
      • Add a scheduling option
      • End the flow
      • Review your variable schema
      • Set up integrations
    • How data works in Formsort
      • Responder UUIDs
    • Understanding flows
    • Versioning in Formsort (Deploying)
      • Variant revisions
      • Managing revisions
  • ✨Creating Flows
    • Building a new flow
      • Groups
      • Steps
      • Copy-pasting form content
  • Adding questions and content
    • Questions
      • Select
      • Text
      • Address
      • Comparison
      • Confirmation
      • Date
      • Date & time
      • Email address
      • File upload
      • Grid choice
      • Iframe
      • Image upload
      • Number
      • Payment
      • Phone number
      • Postal code
      • Question group
      • Region
      • Signature
      • SSN
      • Yes/No
    • Content
      • Statement
      • Image
      • Next button
      • Video
      • Divider
      • Map
  • Controlling the flow with conditions and logic
    • Advanced logic
  • Variable templating
  • Redirects and endings
  • Field validation
  • Flow and variant management
  • Content library
  • 🧬JSON Form Definition
  • JSON schemas
  • Validating flow schemas
  • Events subscriptions
  • Flow content data format
  • 🎨Styling
    • Customizing appearance
      • Content area & form layout
      • Buttons
      • Typography
      • UI states
      • Color and dimension variables
      • Question containers
      • Inputs and dropdowns
      • Checkmarks
      • Tables
      • Sliders
      • Divider lines
      • Progress bar
      • Comparison cards
      • Animations and transitions
  • CSS & Advanced Styling
    • Custom CSS overrides
    • Step styling
    • CSS reference
  • 🔁Form Behavior Settings
    • Variant settings
      • Form behavior for returning users
      • Group ranking API
    • Navigation sidebar
  • ⚙️Response Data Collection & Management
    • Schema (variables)
      • Variables from questions
      • Externally provided variables
      • Calculated variables
      • API lookups
      • System Library variables
      • Orphaned variables
  • Saving & retrieving responses
  • Importing Data
    • URL parameters
    • POST body
    • Embed query parameters
  • 📊Analytics and Attribution
    • Built-in analytics
    • Split testing
  • 🚀Publishing and Deployment
    • Live preview overview
    • Environments
      • Loading different environments
    • Embedding
      • Web-embed API
        • React-embed
      • Adding authentication
      • Embedding forms in iOS and Android
      • Setting up a dev environment
    • Pre-deployment checklist
  • 📁Workspace Management
    • Accounts
      • Roles and permissions
    • Custom domains
    • Workspace domain detection
  • 🛠️Formsort Admin API
    • Admin API
  • 🔌Integrations
    • Form answers and events
      • Analytics events
      • Signed requests
      • Event payload shape
      • Submission frequencies
      • Runtime error reporting
    • Integration reference
      • Amplitude
        • Amplitude cross domain tracking
      • BigQuery
      • FullStory
      • Google Analytics
        • Updating from Universal Analytics to GA4
      • Google Cloud Storage
      • Google Sheets
      • Google Tag Manager (GTM)
        • JavaScript triggered by flow events
      • Hubspot
      • Jornaya
      • Optimizely
      • PostgreSQL
      • Redshift
      • Rudderstack
      • S3
      • Salesforce
      • Segment
        • Segment Setup
        • Segment cross domain tracking
      • Stripe
      • TrustedForm
      • Webhooks
        • Zapier
Powered by GitBook
On this page
  • Setting up your Google Cloud Storage bucket
  • Connecting Formsort to your bucket
  • How Object URLs are generated
  • Accessing uploaded files

Was this helpful?

  1. Integrations
  2. Integration reference

Google Cloud Storage

Upload files and images directly into your own GCS buckets.

PreviousUpdating from Universal Analytics to GA4NextGoogle Sheets

Last updated 2 years ago

Was this helpful?

When collecting binary data from your flows, such as images or documents from , , or questions, we upload them directly into your infrastructure from the responder's browser.

The answer associated with the question will contain the Object URL of the uploaded asset, such as https://storage.cloud.google.com/{{YOUR_BUCKET_NAME}}/{{FILENAME}}/

This way, you retain control over your responder's data: the GCS bucket can only provide write access to Formsort, so the data uploaded can be secure.

Other answers, such as emails or selected choices, will not be sent to the Google Cloud Storage (GCS) integration -- only binary uploads are placed there.

A common pattern is to use Google Cloud Storage as a staging ground for binary files:

  1. A file is uploaded by Formsort into a bucket.

  2. emit events.

  3. The file is copied / processed / served elsewhere in your infrastructure.

Setting up your Google Cloud Storage bucket

If you don't have an GCS bucket already, or wish to create a new one, set one up in the , taking note of the bucket name of the bucket.

Within your bucket, click Permissions and then Grant access and provide the Storage Object Creator role to the google-cloud-storage@formsort-studio.iam.gserviceaccount.com user. This will allow us to upload, but not read data into this bucket.

Because Formsort will be uploading content directly from the browser and not via Formsort servers, you need to allow Cross Origin Resource Sharing (CORS) for this bucket. Please follow the instructions below

  • Login with 'gcloud init' command

[
  {
    "origin": ["*"],
    "responseHeader": ["*"],
    "method": ["PUT"],
    "maxAgeSeconds": 3600
  }
]
  • Upload the CORS configuration with gsutil cors set cors.json gs://{ YOUR_BUCKET_NAME }

  • You can confirm your CORS settings with gsutil cors get gs://{ YOUR_BUCKET_NAME }

Connecting Formsort to your bucket

Back in Formsort, in the integrations editor, under Google Cloud Storage, click Add new credential...

Provide your bucket name, and a description of the bucket and click Save bucket info.

At this point, you can return back to the flow you are working on, and add file, image upload, and signature questions, and the files will be placed within your bucket directly from your responders' browsers.

How Object URLs are generated

At the level of the flow's integration, a base path can be specified. This adds an additional prefix that is used to create Object URLs for all uploaded assets. One helpful trick is to create a base path like /prod for the production environment, to distinguish from assets uploaded to other environments.

At the level of a particular question, additional filename patterns can be specified:

Take care that every URL has some uniqueness to it, whether it be the responder UUID, a timestamp, or random UUID, so that uploads from different responders do not overwrite one another.

In the above configuration, uploaded assets would be located at URLs such ashttps://storage.cloud.google.com/fils-test-bucket/file-ae87adcd-e3d3-4578-a9d5-3fa1e7052d1c-fixed.jpg, and is what would be provided in the answers stored in the flow itself.

Accessing uploaded files

If your bucket is publicly available, then the URL that is in the answers can be used by anyone to access the uploaded file.

Generally, the process for generating signed URLs looks like:

  1. Create a service account with the Storage Object Viewer role

  2. Download a keyfile for that service account

For testing locally, you can use the gsutil command. The following generates a URL that's usable for one day after it's created.

gsutil signurl \
  -d 1d \
  /path/to/your/keyfile.json \
  gs://{{bucket_name}}/{{key}}

Ensure that you are URL decoding the URL when creating the key for use with gsutil or the client libraries.

For example, a file with a URL like https://storage.google.com/fils-test-bucket/aa78341a-9310-442b-9c65-3adbc3507c88_2022-10-21T21%3A58%3A46.461Z.jpg would have the URL decoded address of gs://fils-test-bucket/aa78341a-9310-442b-9c65-3adbc3507c88_2022-10-21T21:58:46.461Z.jpg

First, install the Google Cloud SDK CLI:

Create cors.json file with the following example config. You can be more strict about the domain if you want, for example restricting it to *.formsort.app or the you have configured for use with Formsort.

If your bucket or the containing folder are not publicly available, but you wish to give web users access to the file, you will need to create a . Formsort cannot create the signed URL, since it is only given the Storage Object Creator role, and doesn't have the ability to read files.

Use the to generate a signed URL for the storage.google.com URL

🔌
https://cloud.google.com/sdk/docs/install
custom domain
signed url
Cloud Storage libraries
file
image upload
signature
Cloud Storage Triggers
Google Cloud Console
Adding the Formsort user to Google Cloud Storage
Specifying a file destination