It is important to inform users about any errors or warnings that occur during file selection, such as exceeding the maximum number of files or selecting files that exceed the allowed size.

7.1 Add Text Elements for Messages

1. Add a Text Element for Error Messages :

   • In the Design Editor, drag a Text Element to the desired location on your page (e.g., below the Google Drive Picker button).
   • Configure a distinctive style for this element, preferably using alert colors (such as a light red background with dark text) to clearly indicate that it is an error message.
   • You can add a warning icon to visually reinforce the message.

   Configure Condition to Display the Message :

   • Select the text element.
   • In the properties panel, click "Conditional" .
   • Add a new condition:
     • Condition : Google Drive Picker's error_message is not empty
     • Action : Change the text of the element to Google Drive Picker's error_message.
   • You can also configure the element to be visible only when there is an error message.

2. Add a Text Element for Warning Messages :

   • Similarly, add another Text Element to display warnings.
   • Use a different style from the error message, such as a light yellow background with black text, to visually distinguish between errors and warnings.

   Configure Condition :

   • Condition : Google Drive Picker's warning_message is not empty
   • Action : Change the text of the element to Google Drive Picker's warning_message.
   • Configure the element to be visible only when there is a warning message.

7.2 Configure the Workflow to Display Messages

In the workflow you configured in Step 5, add actions to display error and warning messages.

1. Action to Display an Error Message :

   • After any action that may generate an error (such as file selection):
     • Condition : Google Drive Picker's error_message is not empty
     • Action : Element Actions > Display data > Show/Hide Group or Element
     • Configure to show the error text element and assign the corresponding message.
     • Optionally, you can add an action to scroll the page to the error message, ensuring the user sees it.

2. Action to Display a Warning Message :

   • Similar to the previous step, but for warning messages:
     • Condition : Google Drive Picker's warning_message is not empty
     • Action : Element Actions > Display data > Show/Hide Group or Element
     • Configure to show the warning text element with the corresponding message.

3. Clear Previous Messages (Recommended) :

   • At the beginning of the workflow, before any interaction with the Google Drive Picker:
     • Action : Element Actions > Display data > Hide Group or Element
     • Configure to hide both the error and warning text elements.
     • This prevents previous messages from incorrectly persisting during new interactions.

7.3 Customize Messages Based on Context

You can adapt error and warning messages to the specific context of your application:

1. Section-Specific Messages :

   • If your application has different sections with different file restrictions, create custom messages for each one.
   • For example, in a section for uploading profile images:
     • error_message = "The profile image must be a single file. Please select only one image."
     • warning_message = "The selected image exceeds the maximum size of 2 MB. Please select a smaller image or compress it."

2. Messages with Suggested Actions :

   • Enhance messages by including suggestions on how to resolve the issue:
     • error_message = "You have selected 12 files, but the limit is 10. Please reduce your selection or upload them in two separate groups."

3. Messages with Dynamic Information :

   • Use the plugin's properties to create more informative messages:
     • warning_message = "Some files exceed the maximum size of {max_file_size} MB. Of the {total} files selected, only {valid} will be processed."
   • Note : Replace the variables with actual values using Bubble’s dynamic string functionality.

7.4 Implement Additional Visual Feedback

In addition to text messages, you can provide other types of visual feedback:

1. Status Indicators in File Lists :

   • In a Repeating Group that displays the selected files, add visual indicators showing the status of each file:
     • Green icon for valid files
     • Yellow icon for warnings (e.g., large file but accepted)
     • Red icon for rejected files

2. Progress Bars or Counters :

   • If you have a file limit, display a progress bar or counter indicating how many files have been selected out of the maximum allowed.
   • For example: "3 of 5 files selected"

3. Animations and Transitions :

   • Add subtle animations when error or warning messages appear to draw the user’s attention.
   • You can use Bubble’s animation features or custom CSS to achieve these effects.

4. Informative Tooltips :

   • Add tooltips to key elements explaining the restrictions before errors occur.
   • For example, a tooltip on the picker button indicating "Select up to 5 files, maximum 10MB each."

By implementing these elements and strategies, you will provide users with a clear and guided experience when interacting with the Google Drive Picker, reducing frustration and improving the usability of your application.