GoogleDrivePicker Component Documentation

Overview

The GoogleDrivePicker component integrates with the official Google Picker API and is designed for intuitive file selection from Google Drive. It provides a user-friendly interface that allows users to select files of designated types, which can then trigger reactions in the parent application (like uploading, processing, etc.). This component supports multi-file selection and helps ensure that the files selected are securely handled under the proper permissions.

Key Features

• Utilizes the Google Picker API for accessing Google Drive files.
• Supports a variety of file types such as datasets, images, PDFs, and more.
• Loads necessary API scripts dynamically, ensuring compatibility and reducing initial load time.
• Automatically handles file selection and error management.

Settings

The GoogleDrivePicker component accepts the following settings:

1. value

   • Input Type: Array of objects (or single object), string
   • Description: Represents the current selection of files. It can be an array of objects with id and name fields, a single object, or a string representing a legacy file ID.
   • Default Value: undefined

2. onChange

   • Input Type: Function
   • Description: A callback function triggered when the selected files change. It receives the selected files as either an array of objects (if multiple selections are enabled) or a single object.
   • Default Value: undefined

3. fileType

   • Input Type: String
   • Description: Specifies the type of files the picker will display. Available options are spreadsheet, image, pdf, and dataset. Default is dataset, which includes multiple file formats suitable for data processing.
   • Default Value: 'dataset'

4. label

   • Input Type: String
   • Description: The label displayed above the picker button to indicate its function to the user. Mainly for accessibility and user interface clarity.
   • Default Value: 'Select File'

5. description

   • Input Type: String (optional)
   • Description: An optional text that provides additional context or instructions for the picker. It appears below the picker button and can guide the user during their file selection.
   • Default Value: undefined

6. multiSelect

   • Input Type: Boolean
   • Description: Indicates whether multiple file selections are allowed within the picker. If set to true, users can select more than one file at a time. If false, only a single selection is permitted.
   • Default Value: true

How It Works

1. Initialization:

   • When the component is rendered, it checks if the Google APIs are already loaded. If not, it loads the required scripts asynchronously.

2. File Normalization:

   • The selected value is normalized to ensure it is always in an array format, accommodating legacy string IDs or a single file object where necessary.

3. Picker Configuration:

   • Based on the fileType, the component constructs the appropriate view for the Google Picker, allowing the user to select files matching the predefined criteria.

4. Opening the Picker:

   • When the user clicks the trigger button, the picker opens, fetching an authentication token from the backend for security compliance.

5. File Selection:

   • Upon selecting files, a callback handles the selected documents, sending the necessary info back to the parent component and registering the files for persistent access.

6. Error Handling:

   • The component maintains loading and error states to inform the user about the current status of the file selection process.

Expected Data

• Input Data: The component expects a value that can be an array of objects (e.g., { id: "fileId", name: "fileName" }), a single object (e.g., { id: "fileId", name: "fileName" }), or a legacy string ID (e.g., "fileId").
• Output Data: The onChange callback will provide either an array of selected files or a single selected file object, depending on the multiSelect setting.

Use Cases & Examples

Use Case 1: Data Management Tool

A data management application can utilize the GoogleDrivePicker component to enable users to select their data files (like CSVs or Excel spreadsheets) from Google Drive directly, facilitating data import for analysis.

Use Case 2: Document Sharing Platform

In a document sharing platform, the GoogleDrivePicker allows users to attach files from their Google Drive when sharing insights or reports, streamlining collaboration.

Example Scenario

Use Case: A data analyst wants to upload multiple CSV files from Google Drive into the platform for analysis.

Configuration:

{
  "value": [], // Initially no files selected
  "onChange": handleFileChange, // Your defined function to handle changes
  "fileType": "dataset", // Allow all data and document types
  "label": "Upload Data Files", // Custom label
  "description": "Please select the data files you wish to upload from your Google Drive.",
  "multiSelect": true // Enable selecting multiple files
}

The above configuration enables the user to select multiple files, providing a clear label and instructions regarding the purpose of the file selection. The onChange function will handle the results when files are selected.

Integration with AI

There are no specific AI integrations directly tied to the GoogleDrivePicker component. However, the files selected could be processed or analyzed using AI or machine learning models in the parent application once they are uploaded or registered.

Billing Impact

Using the GoogleDrivePicker may incur costs depending on the Google Cloud services utilized, such as API requests and file accesses. Developers should ensure their applications follow Google's billing practices and API quota limits to avoid unexpected costs. It's crucial to evaluate the specific pricing plans and quotas established by Google Cloud for the Google Picker API.