Visual Elements

System is looking for solutions in Knowledgebase, Blogs, AI, and other places

Step 3: Configuring Plugin Properties

After installing the plugin, you need to configure its properties so that it works correctly with your Google credentials and your application's requirements.


3.1 Accessing Plugin Properties

  1. Go to the Installed Plugins Section :

    • In the Bubble editor, go to "Plugins" in the left-hand panel.
    • Select the Google Drive Native Picker plugin you installed.
  2. Configure the Properties :

    • You will see a list of properties that you can configure. These properties correspond to the variables and functionalities of the plugin.

3.2 Configure Each Property

Below are detailed explanations of each property you need to configure:

Google Credentials

Property

Type

Description

Default Value

api_key_google

Text

The Google API key required to authenticate and access the Google Picker and Google Drive APIs. This key allows your application to securely communicate with Google services. It must be generated from the Google Cloud Console for your specific project. If this value is invalid or missing, the plugin will not connect to Google services.

-

client_id_google

Text

The OAuth 2.0 client ID that identifies your application to Google. This ID is essential for the authentication and authorization process that allows users to access their Google Drive files through your application. It must be generated specifically for web applications in the Google Cloud Console.

-

app_id_google

Text

The Google app ID associated with your Google Cloud project. This identifier links requests to the API with your specific project and is necessary for the Picker API to function correctly.

-


Language and Display Settings

Property

Type

Description

Default Value

language

Text

Language code that determines the language of the Google Picker interface. For example, 'es' for Spanish, 'en' for English, 'fr' for French, etc. This value affects all texts, buttons, and messages displayed in the Google Drive picker interface. If left blank, the plugin will automatically use the language configured in the user's browser (navigator.language). If the browser's language is unavailable or cannot be determined, 'es' (Spanish) will be used as the default.

Browser Language


Operation Modes and File Types

Property

Type

Description

Default Value

view_mode

Dropdown

Defines the operation mode of the Google Drive picker, determining what type of interaction and results will be provided.

select

Available Options for view_mode:

  • select: Selection Mode (default): Allows users to select files from Google Drive and returns basic information about the selected files. Useful when only access to file metadata or references is needed. Triggers the onFilesSelected event upon completion.
  • download: Download Mode: Optimized for downloading files. In addition to basic file information, generates direct download URLs adapted to the file type (e.g., exports Google Docs to downloadable formats like DOCX, XLSX, etc.). Automatically initiates download for a single file. Triggers the onFilesDownload event upon completion.
  • share: Share Mode: Focused on generating various types of links for sharing selected files. Provides URLs for viewing, editing, embedding in websites, and optimized for social media. Ideal when different sharing options are needed. Triggers the onFilesShare event upon completion.
  • all: Full Mode: Combines all functionalities of the above modes. Provides complete information, including basic metadata, download URLs, and all sharing link options. It’s the most versatile option when full access is required. Automatically initiates download for a single file. Triggers the onFilesAll event upon completion.

Property

Type

Description

Default Value

file_type

Dropdown (List)

Defines which types of files will be displayed in the Google Drive picker. This setting filters the files that users can view and select, making navigation and selection easier when only certain file types are required.

all

Available Options for file_type:

  • all: Displays all available file types in Google Drive.
  • images: Displays only image files (jpg, png, gif, etc.).
  • videos: Displays only video files (mp4, mov, avi, etc.).
  • documents: Displays only Google Docs and other document formats.
  • spreadsheets: Displays only Google Sheets and other spreadsheet formats.
  • presentations: Displays only Google Slides and other presentation formats.
  • folders: Displays only folders to allow navigation through the Google Drive structure.

Selection and Limit Settings

Property

Type

Description

Default Value

allow_multiple_selection

Checkbox

Determines whether users can select multiple files at once in the picker. When enabled, users can hold down the Ctrl key (or Cmd on Mac) to select multiple files. When disabled, only one file can be selected at a time. Useful for limiting selection to a single file when processing or displaying one item at a time is required.

Enabled

max_files

Number

Sets the maximum number of files a user can select simultaneously. This limitation applies after the user completes their selection and helps prevent overloading during file processing. If a user selects more files than allowed, a custom error message is displayed, and the selection is not processed. If left blank or set to null, there will be no limit on the number of selectable files.

No limit (null)

max_file_size

Number

Defines the maximum allowed size for each individual file in megabytes (MB). Files exceeding this size are automatically excluded from the final selection. This limitation prevents performance issues when uploading large files or storage restrictions. If users select files exceeding this limit, a custom warning message is displayed, and the files are filtered out. If left blank or set to null, there will be no size restriction.

No limit (null)

enable_file_upload

Checkbox

Controls whether users can upload new files to Google Drive directly from the picker. When enabled, an additional option appears in the picker allowing users to upload files from their device. These files are saved to Google Drive and can then be selected immediately. When disabled, users can only select files already existing in their Google Drive.

Enabled


Custom Messages

Property

Type

Description

Default Value

error_message

Text

Custom message displayed when a user selects more files than allowed by themax_filessetting. You can customize this message to provide clear instructions to users about selection limitations. The text can include the variable{max_files}, which will be automatically replaced with the configured value.

"You have selected more files than allowed. Please select up to {max_files} files."

warning_message

Text

Custom message displayed when some of the selected files exceed the maximum allowed size configured inmax_file_size. This message informs users that certain files have been excluded from the selection due to size restrictions. The text can include the variable{max_file_size}, which will be automatically replaced with the configured value in MB.

"Some files exceed the maximum allowed size of {max_file_size} MB and have been excluded."


Security Settings

Property

Type

Description

Default Value

allowed_origins

Text

Defines the origins (domains) from which the plugin is allowed to run. This is a critical security measure that prevents unauthorized use of the plugin from unapproved domains. It can be configured as a comma-separated list of domains or an array of strings. Wildcards (e.g.,*.mydomain.com) are supported to allow all subdomains of a specific domain. If left blank or not configured, the plugin will only work on the domain where the Bubble application is hosted. This configuration is essential to prevent unauthorized use of your Google API keys and comply with best security practices.

Current application domain

strict_security

Checkbox

Enables additional and strict security checks during plugin operation. When enabled, the plugin verifies the runtime environment and blocks operations in environments considered insecure (such as non-HTTPS connections, presence of open developer tools, or execution within unauthorized iframes). This setting provides an additional layer of protection against malicious use but may limit functionality in certain development environments.

Disabled

inactivity_timeout

Number

Sets the inactivity timeout in minutes before the user's session expires automatically. When this time is reached without user interaction (no mouse movements, key presses, or clicks), the access token is removed, and thesession_expiredevent is triggered. This feature enhances security by automatically closing inactive sessions. If set to 0, the inactivity timeout feature is disabled.

0 (disabled)


3.3 Enter Google Credentials

  1. api_key_google:

    • Copy the API Key you obtained in Step 1.5.
    • Paste this value into the corresponding field.
  2. client_id_google:

    • Copy the Client ID you obtained in Step 1.4.
    • Paste this value into the corresponding field.
  3. app_id_google:

    • Copy the App ID of your Google Cloud project.
    • Paste this value into the corresponding field.

3.4 Configure Language and Operation Modes

  1. language:

    • Set the language code for the Picker interface. For example, "es" for Spanish, "en" for English, etc.
    • If left blank, the plugin will automatically use the language configured in the user's browser.
  2. view_mode:

    • Select the operation mode of the Google Picker according to your needs:
      • select: Standard selection mode that returns basic file information.
      • download: Optimized for downloading files and generates direct download URLs.
      • share: Focused on generating shareable links with different options.
      • all: Combines all the above functionalities into a single mode.
  3. file_type:

    • Select the type of files you want users to be able to select in the Picker.
    • Available Options:
      • all - All files
      • images - Images
      • videos - Videos
      • documents - Google Docs
      • spreadsheets - Spreadsheets
      • presentations - Presentations
      • folders - Folders

3.5 Configure Custom Limits

  1. max_files:

    • Define the maximum number of files a user can select.
    • Example: If you set 3, users will not be able to select more than 3 files.
    • Note: Leave this field blank or set to null if you do not want to set a limit.
  2. max_file_size:

    • Define the maximum allowed size for each file in megabytes (MB).
    • Example: If you set 5, no selected file can exceed 5 MB.
    • Note: Leave this field blank or set to null if you do not want to set a limit.

3.6 Enable or Disable File Upload

  1. enable_file_upload:
    • Enabled (true): Allows users to upload new files from the Picker.
    • Disabled (false): Only allows users to select existing files in Google Drive.

3.7 Configure Security Restrictions

  1. allowed_origins:

    • Define the domains from which the plugin is allowed to run.
    • You can specify multiple domains separated by commas.
    • Supports wildcards (e.g., *.mydomain.com) to allow all subdomains.
    • If left blank, it will only work on the domain where the application is hosted.
  2. strict_security:

    • Enabled (true): Applies strict security checks and blocks operations in insecure environments.
    • Disabled (false): Allows operations with basic security checks.
  3. inactivity_timeout:

    • Define the inactivity timeout in minutes before the session expires.
    • If set to 0, there will be no automatic expiration.

3.8 Configure Error and Warning Messages

  1. error_message:

    • Customize the message displayed when a user exceeds the maximum number of selected files.
    • Default Example: "You have selected more files than allowed. Please select up to {max_files} files."
  2. warning_message:

    • Customize the message displayed when some files exceed the maximum allowed size and are excluded.
    • Default Example: "Some files exceed the maximum allowed size of {max_file_size} MB and have been excluded."

Was this page helpful?

Thank you for your feedback!

Comments (00)

Leave a comment

Sign in to post your comment or Sign Up if you don't have any account.

Ai Replying

We use cookies to enhance your experience on our website. By continuing to browse, you agree to our use of cookies. Learn more in our Privacy Policy

Accept All Reject All

Support, Knowledgebase, Live Chat, and CRM.

Get In Touch

Need More Help