Visual Elements

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

Step 6: Handling Selected File Data

Once users select files using the Picker, you need to handle and utilize this data in your Bubble application. This may include displaying information, storing data in the database, or performing additional actions.


6.1 Plugin Exposed States

The data from the selected files is published in the plugin's states. These states are available for use in your Bubble application.

6.1.1 Common States Across All Modes

State

Data Type

Description

file_names

List of Text

Contains the full names of the selected files, including the file extension. These names are useful for displaying user-readable information about the selected files. They can also be used to generate unique identifiers or organize files in the application.

file_ids

List of Text

Contains the unique Google Drive IDs for each selected file. These IDs are essential for any subsequent operations with the Google Drive API, such as downloading, sharing, or updating files. The IDs remain constant even if the file name changes, providing a stable reference.

file_mime_types

List of Text

Contains the MIME types of the selected files (e.g., "image/jpeg", "application/pdf", "application/vnd.google-apps.document"). This information is useful for determining the type of content and how each file should be processed or displayed. Google-specific MIME types (beginning with "application/vnd.google-apps") indicate native Google documents that may require special handling.

file_urls

List of Text

Contains direct URLs to access the selected files. These URLs can be used to download, preview, or link to the files. For regular files, these URLs point directly to the file content, while for Google Docs, they point to the viewable version of the document.

file_thumbnails

List of Text

Contains URLs for thumbnails of the selected files, generated by Google Drive. For image files, these thumbnails represent the actual content. For other file types, they display icons or automatically generated previews. These URLs are useful for showing visual representations of the files in your application's user interface.

file_sizes

List of Numbers

Contains the sizes of the selected files in bytes. This information is useful for displaying file sizes to users, verifying if they meet certain limits, or calculating the total space occupied by a set of files. Some files may not have a defined size (especially native Google documents), in which case the value will be 0.

file_owners

List of Text

Contains the names of the owners of the selected files. This information is useful for identifying who the creator or primary owner of each file is, which can be important for applications that handle permissions or attribution. If owner information is unavailable for a file, "Unknown" will be used as the default value.

error_message

Text

Contains the custom error message displayed when the maximum number of selected files is exceeded (configured in themax_filesproperty). This state is useful for providing clear feedback to the user about why their selection was not fully processed. The message is configured in theerror_messageproperty.

warning_message

Text

Contains the custom warning message displayed when some selected files exceed the maximum allowed size (configured in themax_file_sizeproperty). This state is useful for informing the user that part of their selection has been filtered due to size restrictions. The message is configured in thewarning_messageproperty.


6.1.2 Download Mode-Specific States

State

Data Type

Description

download_file_names

List of Text

Contains the names of the files prepared for download. For native Google documents (such as Google Docs, Sheets, or Slides), these names include the appropriate extension for the exported format (e.g., .docx, .xlsx, .pptx), making it easier for users to identify the downloaded file type.

download_file_ids

List of Text

Contains the unique Google Drive IDs for the files prepared for download. These IDs are important for tracking which specific files are being downloaded, especially when processing multiple files.

download_urls

List of Text

Contains URLs specifically optimized for direct file downloads. These URLs are configured to allow immediate content download without requiring additional authentication. For native Google documents, these URLs point to exported versions in standard formats (e.g., DOCX for Google Docs, XLSX for Google Sheets, PPTX for Google Slides), enabling downloadable usable versions of these documents in external applications. When a single file is selected in this mode, the plugin will automatically initiate the download using the corresponding URL.


6.1.3 Share Mode-Specific States

State

Data Type

Description

share_view_urls

List of Text

Contains URLs specifically formatted to allow others to view shared files in read-only mode. These URLs are configured to work even for users who are not logged into Google (if file permissions allow). For native Google documents, these URLs open the documents in view mode, while for other file types, they open a preview in the Google Drive viewer. These URLs are ideal for sharing content that only needs to be viewed but not edited.

share_edit_urls

List of Text

Contains URLs that allow others to edit shared files (mainly applicable to native Google documents like Docs, Sheets, and Slides). These URLs are formatted to open documents directly in edit mode for users with appropriate permissions. For files that cannot be edited in Google Drive (e.g., PDFs or images), this value may be empty. These URLs are useful when real-time collaboration or multi-user editing is required.

share_embed_urls

List of Text

Contains URLs specifically formatted for embedding files in websites, blogs, or applications. These URLs are designed to work with iframe tags and provide an integrated viewing experience without leaving the website where they are embedded. Different file types generate optimized embedding URL formats: documents use preview mode, presentations use specific embedding mode, and media files use specialized viewers. These URLs are ideal for integrating Google Drive content directly into web pages.

share_social_urls

List of Text

Contains URLs optimized for sharing on social media and messaging platforms. These URLs are designed to provide rich previews when shared on platforms like Facebook, Twitter, LinkedIn, or messaging apps. They include special parameters that enhance how they appear when shared, showing thumbnails, titles, and appropriate descriptions in the generated previews. They are ideal for marketing campaigns or when you want to maximize visual impact when sharing content on social media.


6.2 Plugin Events

The plugin emits several events that you can use to trigger workflows in your Bubble application. These events allow you to respond to different user actions and situations during interaction with Google Drive.

Event

Description

onFilesSelected

Triggered when the user successfully completes file selection in standard mode ("select"). This event indicates that the plugin's basic states (file_names,file_ids, etc.) have been updated with the selected files' information. It is the ideal time to process file metadata, display it in the user interface, or store it in the database. Use this event when you only need basic information about the selected files.

onFilesDownload

Triggered when file preparation for download is completed in "download" mode. This event indicates that, in addition to the basic states, the download-specific states (download_file_names,download_file_ids,download_urls) have been updated. If a single file was selected, its download will also have been automatically initiated. Use this event when you need to work with URLs optimized for direct download or when you want to perform actions after the user downloads files.

onFilesShare

Triggered when link generation for sharing is completed in "share" mode. This event indicates that the sharing-specific states (share_view_urls,share_edit_urls,share_embed_urls,share_social_urls) have been updated with the different types of URLs. Use this event when you need to work with the various sharing options or display these links to the user so they can choose how to share their files.

onFilesAll

Triggered when all operations are completed in "all" mode. This event indicates that all plugin states (basic, download, and sharing) have been updated with complete information. If a single file was selected, its download will also have been automatically initiated. Use this event when you need full access to all plugin capabilities in a single step.

onCancel

Triggered when the user explicitly cancels the picker operation by closing the Google Picker dialog without selecting files. Use this event to clean up temporary states, display informational messages, or redirect to other parts of your application when the user decides not to select any files.

onError

Triggered when a significant error occurs during any plugin operation. This event includes information about the error type in theerror_codeanderror_messageparameters. Common errors include exceeding the maximum number of allowed files, authentication issues, or API failures. Use this event to gracefully handle errors and provide clear feedback to the user.

onWarning

Triggered when a situation arises that requires attention but does not prevent the main operation, such as when some files exceed the maximum allowed size and are excluded from the selection. This event includes information in thewarning_codeandwarning_messageparameters. Use this event to alert the user about suboptimal conditions while allowing them to continue with the main operations.

session_expired

Triggered when the user’s session expires due to inactivity (ifinactivity_timeoutis configured with a positive value). This event indicates that the access token has been removed for security reasons and re-authentication is needed. Use this event to display informational messages to the user and redirect them to the authentication flow when resuming the operation is necessary.

security_alert

Triggered when the plugin’s security system detects a potential security issue, such as code manipulation attempts, execution in unauthorized environments, or suspicious behavior patterns. Use this event to implement additional protective measures, such as logging suspicious attempts or temporarily limiting certain functionalities.


6.3 Displaying Data in the User Interface

You can use these states to display information about the selected files in your Bubble application.

6.3.1 Using a Repeating Group to Display Files

  1. Add a Repeating Group :

    • In the Design Editor, drag a Repeating Group to the page where you want to display the list of files.
  2. Configure the Data Source :

    • Select the Repeating Group.
    • In the "Type of Content" section, select "Text" or a custom data type if you’ve created one to store file information.
    • In the "Data Source" section, set it to Google Drive Picker's file_ids.
  3. Add Elements Inside the Repeating Group :

    • Text Element for File Name :
      • Drag a Text Element inside a cell of the Repeating Group.
      • Configure the text as Current cell's Google Drive Picker's file_names.
    • Image Element for Thumbnail :
      • Drag an Image Element inside a cell of the Repeating Group.
      • Configure the image as Current cell's Google Drive Picker's file_thumbnails.
      • Note : Handle null values for non-image files to avoid errors.
    • Text Element for MIME Type :
      • Drag another Text Element to display the file's MIME type.
    • Link Element to Download the File :
      • Drag a Link Element.
      • Configure the link as Current cell's Google Drive Picker's file_urls.
      • Assign descriptive text like "Download".

6.3.2 Storing Data in the Database

  1. Create a Custom Data Type :

    • Go to the "Data" tab in the Bubble Editor.
    • Select "Data Types" and click "New Type".
    • Data Type Name: e.g., "File".
    • Fields:
      • Name: Text
      • File ID: Text
      • MIME Type: Text
      • URL: Text
      • Thumbnail: Text
      • Size: Number
      • Owner: Text
  2. Configure the Workflow to Create New Files :

    • In the workflow you configured in Step 5, add a "Create a new thing" action.
    • Thing Type: "File"
    • Fields:
      • Name: Google Drive Picker's file_names
      • File ID: Google Drive Picker's file_ids
      • MIME Type: Google Drive Picker's file_mime_types
      • URL: Google Drive Picker's file_urls
      • Thumbnail: Google Drive Picker's file_thumbnails
      • Size: Google Drive Picker's file_sizes
      • Owner: Google Drive Picker's file_owners
  3. Save and Test :

    • Save the changes to the workflow.
    • Test file selection to ensure the data is stored correctly in the database.

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