Skip to main content

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.

Drive Picker Widget

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
Drive Picker Basic Configuration

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
Drive Picker Required Credentials

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
Drive Picker Credentials API Key
  1. 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
Drive Picker Screen-based Validation

Advanced Conditions​

Use dynamic conditions with variables:

Drive Picker Advanced Conditions

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
Drive Picker Validation Rules

Styling Options​

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

Usage Examples​

Basic Configuration With Validation​

Drive Picker With Validation

Advanced Configuration​

Drive Picker 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