Select Google Drive files and folders with Google Picker

To let users select files or folders from Google Drive, you can configure a SelectionInput widget to use the Google Picker. This guide explains how to set up the Google Picker in your add-on's configuration card.

Configure the Google Picker

To enable the selection input widget to select files or folders from Google Drive, you must configure its PlatformDataSource with CommonDataSource and DriveDataSourceSpec .

Set the CommonDataSource to DRIVE . This designates Google Drive as the source for the selection input.
(Optional) To specify which file types users can select, add a DriveDataSourceSpec . You can specify one or more of the following item types:
- DOCUMENTS
- SPREADSHEETS
- PRESENTATIONS
- PDFS
- FORMS
- FOLDERS

Example: Select spreadsheets and PDFs

The following example builds a configuration card that lets users select multiple spreadsheets or PDF files from Google Drive. When the step runs, it returns the file IDs of the selected items as output variables.

JSON

  { 
  
 "timeZone" 
 : 
  
 "America/Los_Angeles" 
 , 
  
 "exceptionLogging" 
 : 
  
 "STACKDRIVER" 
 , 
  
 "runtimeVersion" 
 : 
  
 "V8" 
 , 
  
 "addOns" 
 : 
  
 { 
  
 "common" 
 : 
  
 { 
  
 "name" 
 : 
  
 "Google Picker Demo" 
 , 
  
 "logoUrl" 
 : 
  
 "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png" 
 , 
  
 "useLocaleFromApp" 
 : 
  
 true 
  
 }, 
  
 "flows" 
 : 
  
 { 
  
 "workflowElements" 
 : 
  
 [ 
  
 { 
  
 "id" 
 : 
  
 "file_selection" 
 , 
  
 "state" 
 : 
  
 "ACTIVE" 
 , 
  
 "name" 
 : 
  
 "File selection" 
 , 
  
 "workflowAction" 
 : 
  
 { 
  
 "inputs" 
 : 
  
 [ 
  
 { 
  
 "id" 
 : 
  
 "drive_picker_1" 
 , 
  
 "description" 
 : 
  
 "Choose a file from Google Drive" 
 , 
  
 "dataType" 
 : 
  
 { 
  
 "basicType" 
 : 
  
 "STRING" 
  
 } 
  
 } 
  
 ], 
  
 "outputs" 
 : 
  
 [ 
  
 { 
  
 "id" 
 : 
  
 "file_id" 
 , 
  
 "description" 
 : 
  
 "The id of the selected file" 
 , 
  
 "cardinality" 
 : 
  
 "SINGLE" 
 , 
  
 "dataType" 
 : 
  
 { 
  
 "basicType" 
 : 
  
 "STRING" 
  
 } 
  
 } 
  
 ], 
  
 "onConfigFunction" 
 : 
  
 "onConfig" 
 , 
  
 "onExecuteFunction" 
 : 
  
 "onExecute" 
  
 } 
  
 } 
  
 ] 
  
 } 
  
 } 
 }

Apps Script

  /** 
 * Returns a configuration card for the step. 
 * This card includes a selection input widget configured as a Google Picker 
 * that lets users select spreadsheets and PDFs. 
 */ 
 function 
  
 onConfig 
 () 
  
 { 
  
 // Specify the file types to allow. In this example, users can 
  
 // select either spreadsheets or PDFs. 
  
 const 
  
 driveSpec 
  
 = 
  
 CardService 
 . 
 newDriveDataSourceSpec 
 () 
  
 . 
 addItemType 
 ( 
 CardService 
 . 
 DriveItemType 
 . 
 SPREADSHEETS 
 ) 
  
 . 
 addItemType 
 ( 
 CardService 
 . 
 DriveItemType 
 . 
 PDFS 
 ); 
  
 // Set Google Drive as the data source for the selection input. 
  
 const 
  
 platformSource 
  
 = 
  
 CardService 
 . 
 newPlatformDataSource 
 () 
  
 . 
 setCommonDataSource 
 ( 
 CardService 
 . 
 CommonDataSource 
 . 
 DRIVE 
 ) 
  
 . 
 setDriveDataSourceSpec 
 ( 
 driveSpec 
 ); 
  
 // Create the selection input widget. 
  
 const 
  
 selectionInput 
  
 = 
  
 CardService 
 . 
 newSelectionInput 
 (). 
 setFieldName 
 ( 
 "drive_picker_1" 
 ) 
  
 . 
 setPlatformDataSource 
 ( 
 platformSource 
 ) 
  
 . 
 setTitle 
 ( 
 "Google Picker" 
 ) 
  
 . 
 setType 
 ( 
 CardService 
 . 
 SelectionInputType 
 . 
 MULTI_SELECT 
 ); 
  
 // Build the card section and add the widget. 
  
 var 
  
 sectionBuilder 
  
 = 
  
 CardService 
 . 
 newCardSection 
 () 
  
 . 
 addWidget 
 ( 
 selectionInput 
 ); 
  
 // Build the card and return it. 
  
 var 
  
 card 
  
 = 
  
 CardService 
 . 
 newCardBuilder 
 () 
  
 . 
 addSection 
 ( 
 sectionBuilder 
 ) 
  
 . 
 build 
 (); 
  
 return 
  
 card 
 ; 
 } 
 /** 
 * Executes when the step runs. 
 * This function retrieves the file ID of the item selected in the Google Picker 
 * and returns it as an output variable. 
 * @param {Object} event The event object passed by the Flows runtime. 
 * @return {Object} The output variables object. 
 */ 
 function 
  
 onExecute 
 ( 
 event 
 ) 
  
 { 
  
 // Get the file ID from the input event object. 
  
 var 
  
 fileId 
  
 = 
  
 event 
 . 
 workflow 
 . 
 actionInvocation 
 . 
 inputs 
 [ 
 "drive_picker_1" 
 ]. 
 stringValues 
 [ 
 0 
 ]; 
  
 // Create a variableData object to hold the output. 
  
 const 
  
 variableData 
  
 = 
  
 AddOnsResponseService 
 . 
 newVariableData 
 (). 
 addStringValue 
 ( 
 fileId 
 ); 
  
 // Create a log message for the Activity tab. 
  
 let 
  
 textFormatElement 
  
 = 
  
 AddOnsResponseService 
 . 
 newTextFormatElement 
 (). 
 setText 
 ( 
 "A file has been selected!" 
 ); 
  
 let 
  
 workflowTextFormat 
  
 = 
  
 AddOnsResponseService 
 . 
 newWorkflowTextFormat 
 (). 
 addTextFormatElement 
 ( 
 textFormatElement 
 ); 
  
 // Create the return action to output the variable. The string key ("result") 
  
 // must match the ID of the output defined in the manifest. 
  
 let 
  
 returnAction 
  
 = 
  
 AddOnsResponseService 
 . 
 newReturnOutputVariablesAction 
 () 
  
 . 
 setVariables 
 ({ 
  
 "file_id" 
 : 
  
 variableData 
  
 }). 
 setLog 
 ( 
 workflowTextFormat 
 ); 
  
 // Build and return the render action. 
  
 let 
  
 hostAppAction 
  
 = 
  
 AddOnsResponseService 
 . 
 newHostAppAction 
 (). 
 setWorkflowAction 
 ( 
 returnAction 
 ); 
  
 const 
  
 renderAction 
  
 = 
  
 AddOnsResponseService 
 . 
 newRenderActionBuilder 
 (). 
 setHostAppAction 
 ( 
 hostAppAction 
 ). 
 build 
 (); 
  
 return 
  
 renderAction 
 ; 
 }