After installing the plugin, you must configure its properties for it to work correctly with your Google credentials and your application's needs.

3.1. Access the Plugin Properties

• Go to the Installed Plugins Section:

  • In the Bubble editor, go to "Plugins" in the left sidebar.

  • Select the Google Picker plugin you installed.

• Configure the Properties:

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

3.2. Configure Each Property

The Fields are the configurable properties of the plugin that allow you to customize its behavior and appearance. Below is a detailed description of each available field:

1. API Key (api_key)

• Description : API key provided by Google to authenticate requests to its services.

• Type : Text

• Required : Yes

• Function : Authenticates calls to the Google Picker API.

2. App ID (app_id)

• Description : Application identifier registered in the Google Developers Console.

• Type : Text

• Required : Yes

• Function : Associates the application with the integration of Google Picker.

3. Client ID (client_id)

• Description : OAuth 2.0 client ID provided by Google for automatic authentication.

• Type : Text

• Required : Conditional (required only if automatic authentication is used)

• Function : Facilitates the automatic authentication flow via Google Identity Services.

4. Language (language)

• Description : Language in which the Picker will be displayed.

• Type : Text (language code, e.g., es, en)

• Required : No

• Default Value : es

• Function : Localizes the Picker interface to the specified language.

5. Authentication Mode (auth_mode)

• Description : Authentication method used to obtain the access token.

• Type : Selection (Dropdown)

• Options :

  • manual: The user provides an access token manually.

  • automatic: The plugin handles authentication automatically via Google Identity Services.

• Required : Yes

• Default Value : manual

• Function : Determines how the required access token is obtained to interact with Google Drive.

6. Access Token (access_token)

• Description : OAuth 2.0 access token used to authenticate requests to Google Drive.

• Type : Text

• Required : Conditional (required only if manual authentication is used)

• Function : Authorizes the plugin's requests to Google Drive.

7. Allow Multiple Selection (allow_multiple_selection)

• Description : Allows selecting multiple files in the Picker.

• Type : Boolean

• Required : No

• Default Value : true

• Function : Enables or disables the ability to select multiple files.

8. File Type (file_type)

• Description : Type(s) of files that can be selected.

• Type : List of texts

• Required : No

• Default Value : all

• Common Options :

  • all

  • images

  • videos

  • documents

  • spreadsheets

  • presentations

  • folders

• Function : Filters the types of files available for selection in the Picker.

9. Max Files (max_files)

• Description : Maximum number of files that can be selected.

• Type : Number

• Required : No

• Default Value : null (no limit)

• Function : Limits the number of files a user can select.

10. Max File Size (max_file_size)

• Description : Maximum allowed size for each selected file, in MB.

• Type : Number

• Required : No

• Default Value : null (no limit)

• Function : Restricts the size of files that can be selected.

11. Enable File Upload (enable_file_upload)

• Description : Enables the option for users to upload new files via the Picker.

• Type : Boolean

• Required : No

• Default Value : true

• Function : Allows users to upload files directly from the Picker.

12. Error Message (error_message)

• Description : Custom error message displayed when the maximum number of selected files is exceeded.

• Type : Text

• Required : No

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

• Function : Provides feedback to the user in case of excessive selection.

13. Warning Message (warning_message)

• Description : Custom warning message displayed when some files exceed the maximum allowed size.

• Type : Text

• Required : No

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

• Function : Informs the user about files that do not meet the selection criteria

Additional Considerations

• Required Fields: The api_key, app_id,cliend_id and access_token fields are essential for the plugin to function. Make sure to obtain these values from your Google Cloud project and enter them correctly.

• Localization: The language property allows you to customize the Picker interface to match your application's language.

• File Restrictions: The file_type, max_files, and max_file_size properties provide control over the types and sizes of files that users can select.

• Error Handling: The error_message and warning_message properties enable you to provide user-friendly feedback in case of errors or warnings.

3.3. Enter Google Credentials

1. api_key :

   • Copy the API Key you obtained in Step 1.5.

   • Paste this value into the corresponding field.

2. app_id :

   • Copy the App ID of your Google Cloud project.

   • Paste this value into the corresponding field.

3. access_token :

   • This token must be generated through an OAuth 2.0 authentication flow.

   • Note: The generation and management of the access_token are generally handled through backend workflows or additional integrations. Ensure you implement a secure way to obtain and renew this token.

3.4. Configure Language and File Types

1. language :

   • Set the language code for the Picker interface. For example, es for Spanish, en for English, etc.

2. 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 documents

     • spreadsheets - Spreadsheets

     • presentations - Presentations

     • folders - Folders

     • images_videos - Images and Videos

3.5. Configure Custom Limitations

1. max_files :

   • Define the maximum number of files a user can select.

   • Example: If you set it to 3, users will not be able to select more than 3 files.

   • Note: Leave this field blank or set it to null if you do not wish to impose a limit.

2. max_file_size :

   • Define the maximum allowed size for each file in megabytes (MB).

   • Example: If you set it to 5, no selected file can exceed 5 MB.

   • Note: Leave this field blank or set it to null if you do not wish to impose a limit.

3.6. Enable or Disable File Uploads

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 Error and Warning Messages

1. error_message :

   • Customize the message that will be 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 that will be 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."