Widget GoogleDocsPicker (Drive Picker)

The GoogleDocsPicker widget allows users to select and import documents from Google Drive directly into your application. It provides a seamless integration with Google Drive API, enabling users to browse, select, and upload files from their Google Drive account.

Overview​

This widget creates a button that, when clicked, opens the Google Drive Picker interface. Users can browse through their files, shared files, and recently accessed documents. Selected files are automatically downloaded and uploaded to your platform's file system.

Basic Configuration​

• Name: Display name for the widget

• Variable/Model: The variable name that will store the selected files array

• Button Type: Visual style of the button

  • primary (blue)
  • success (green)
  • info (gray)
  • warning (orange)
  • danger (red)

• Button Size: Size of the button

  • medium
  • small
  • mini

• Button Alignment: Horizontal alignment

  • left
  • center
  • right

• Icons: Optional prefix and suffix icons to enhance the button appearance

  • Prefix Icon: Icon displayed before the button text
  • Suffix Icon: Icon displayed after the button text

Credentials Configuration​

The widget requires Google Drive API credentials to function properly. These should be configured as environment variables:

Required Credentials​

• Client ID: OAuth 2.0 client ID from Google Cloud Console
• Client Secret: OAuth 2.0 client secret from Google Cloud Console
• API Key: Google Drive API key from Google Cloud Console

Setting Up Credentials​

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Enable the Google Drive API and Google Picker API
4. Create OAuth 2.0 credentials and API key
5. Configure the credentials in Volt, create 3 entries:
   • google_drive_client_id
   • google_drive_client_secret
   • google_drive_api_key

6. Select the appropriate variables in the widget configuration:
   • Client Id: Select from available environment variables
   • Client Secret: Select from available environment variables
   • Api Key: Select from available environment variables

Features​

File Selection Interface​

The widget opens Google Drive Picker with multiple views:

• My Drive: Files owned by the user
• Shared with me: Files shared by others
• Shared drives: Team drive files
• Recent: Recently accessed files

Supported File Types​

The widget handles two categories of files:

1. Native Google Files: Documents, Spreadsheets, Presentations
   • Automatically exported to standard formats (PDF for docs, CSV for sheets)
2. Regular Files: All other file types
   • Downloaded in their original format

Validation Options​

Screen-based Validation​

Configure different validation states for different screens/contexts:

• Available: Whether the widget is available on the screen
• Visible: Whether the widget is visible to users
• Required: Whether file selection is mandatory
• Disable: Whether the widget is disabled

Advanced Conditions​

Use dynamic conditions with variables:

Validation Rules​

Add custom validation rules with messages:

• Rule Types: Various built-in validation rules
• Custom Values: Rule-specific parameters
• Error Messages: Custom messages shown to users on validation failure

Styling Options​

• CSS Classes: Add custom CSS classes for styling
• Dynamic Classes: Use conditions to apply classes based on data state

Usage Examples​

Basic Configuration With Validation​

Advanced Configuration​

Security Considerations​

• Ensure proper OAuth scope configuration
• Use environment variables for sensitive credentials
• Implement proper access controls for file uploads
• Validate file types and sizes on the server side

Troubleshooting​

Common Issues​

1. Authentication Errors: Verify credentials are correctly configured
2. Picker Not Opening: Check if Google APIs are enabled
3. File Upload Failures: Verify server-side file handling
4. CORS Issues: Ensure proper domain configuration in Google Console

Debug Tips​

• Check browser console for API errors
• Verify OAuth redirect URIs match your domain
• Test with different file types and sizes
• Monitor network requests for API call failures

Browser Support​

The widget requires modern browsers with support for:

• ES6 JavaScript features
• OAuth 2.0 authentication
• File API for upload handling
• Modern CSS features for styling