LogoLogo
Back to studio
  • Formsort documentation
  • โฉQuickstart
    • ๐ŸŸขGet started with Formsort
    • ๐ŸŽCore concepts
    • โ„น๏ธQuestion and content reference
    • ๐Ÿ“•Key terms
    • ๐Ÿž๏ธCreate your first flow
    • ๐Ÿ“–Add content and collect answers
      • ๐ŸคณCapture demographic data
      • โ„น๏ธAdd informational content
      • ๐Ÿ” Review your variable schema
    • ๐ŸŽจCreate a theme
      • Set brand guidelines
    • ๐ŸคนPersonalize your flow
      • ๐ŸŒŸTemplate your variables
      • ๐Ÿง Add conditional logic
      • ๐Ÿ’ซUsing conditional logic with Calculated and API variables
      • ๐Ÿ”šEnd the flow
    • ๐Ÿ”€Set up integrations
    • ๐Ÿš€Go live
      • Auditing your flow for content, functionality, and design
    • ๐Ÿ’ผCommon use cases
      • ๐Ÿ’”Disqualify responders
      • ๐Ÿ—“๏ธAdd a scheduling option
      • ๐Ÿ“„Allow responders to read and accept your company policies
  • ๐Ÿ—๏ธBuilding flows
    • Flows and variants
      • Flow starts
    • Adding content
      • Groups
      • Steps
        • Settings
        • Logic
        • Style
      • Questions
        • General Settings
        • Style
        • Address
        • Comparison
        • Confirmation
        • Date
        • Date & Time
        • Email address
        • File upload
        • Grid choice
        • Iframe
        • Image upload
        • Number
        • Payment
        • Phone number
        • Postal code
        • Question group
        • Region
        • Select
          • Providing choices via API or calculation
        • Signature
        • SSN
        • Text questions
        • Yes/No
      • Content
        • General Settings
        • Statement
        • Image
        • Video
        • Next button
        • Divider
        • Map
      • Endings
      • Using markdown
      • Using variable templating
        • Template formatting functions
      • Copy-pasting form content
      • Content library
    • Conditions and logic
      • Logical operator reference
      • Advanced logic
    • Variables (answers)
      • Variables from questions
      • Externally provided variables
      • Calculated variables
      • API lookups
      • System Library variables
      • Orphaned variables
    • Schemas
      • JSON Schemas
      • Validating flow schemas
    • Redirects
    • Styling and themes
      • CSS Reference
      • Overriding theme styling
      • Custom CSS overrides
      • Content area
      • Animations and transitions
      • Form Layout
      • Typography
        • Adobe Fonts
        • Hosting custom fonts
      • Color variables
      • Dimension variables
      • Question containers
      • Assets
      • Form Buttons
        • Select buttons
      • Inputs and dropdowns
      • Checkmarks
      • Tables
      • Sliders
      • Divider lines
      • Progress bar
      • Comparison cards
    • Variant settings
      • Form behavior for returning responders
      • Group ranking API
    • Publishing and versions
      • Preview window
      • Deploying
      • History
  • ๐Ÿ’พHandling data
    • Philosophy and data retention policy
    • Viewing form answers
    • Responder UUIDs
    • Environments
      • Loading different environments
    • Passing data in
      • URL parameters
      • POST body
      • Embed query parameters
    • Custom validators
    • Form answers and events
      • Analytics events
      • Signed requests
      • Event payload shape
      • Submission frequencies
      • Runtime error reporting
      • Admin API
      • Flow content data format
    • 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
  • ๐Ÿ“บGoing live
    • Custom domains
    • Built-in analytics
    • Embedding
      • Web-Embed API
        • React-embed
      • Adding authentication
      • Embedding forms in iOS and Android
      • Setting up a dev environment
    • Split testing
    • Preflight checklist
  • ๐ŸขTeams
    • Accounts
      • Roles and permissions
    • Events subscriptions
    • Workspace domain detection
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. Handling data
  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