Using Google Picker with Google Apps Script

Published in: Google Apps Script

The Google Picker API lets you select files and folders in Google Drive visually. It can used inside Google Spreadsheet, Google Docs or a standalone HTML web app.

Here’s a snippet that will let user select one or more Drive folders with the Google File Picker API bound inside a Google Spreadsheet. The dialog window only shows the Folders list and all the other files in the Drive stay hidden. When the user selects a folder, the ID of the Drive folder is printed else the dialog is closed.


function onOpen() {
  SpreadsheetApp.getUi().createMenu('Google Picker')
      .addItem('Choose Folder', 'showPicker')

 * Displays an HTML-service dialog in Google Sheets that contains client-side
 * JavaScript code for the Google Picker API.
function showPicker() {
  var html = HtmlService.createHtmlOutputFromFile('Picker.html')
  SpreadsheetApp.getUi().showModalDialog(html, 'Select Folder');

function getOAuthToken() {
  return ScriptApp.getOAuthToken();

Also save this file as “Picker.html” inside the Google Apps Script project.

<!DOCTYPE html>
  <link rel="stylesheet" href="">
  <script type="text/javascript">
        width: 600,
        height: 425
    var pickerApiLoaded = false;

    function onApiLoad() {
        gapi.load('picker', {
            'callback': function() {
                pickerApiLoaded = true;

    function createPicker(token) {

        if (pickerApiLoaded && token) {

            var docsView = new google.picker.DocsView()

            var picker = new google.picker.PickerBuilder()
                .setSize(DIALOG_DIMENSIONS.width - 2, DIALOG_DIMENSIONS.height - 2)


        } else {
            showError('Unable to load the file picker.');

     * A callback function that extracts the chosen document's metadata from the
     * response object. For details on the response object, see
     * @param {object} data The response object.
    function pickerCallback(data) {
        var action = data[google.picker.Response.ACTION];
        if (action == google.picker.Action.PICKED) {
            var doc = data[google.picker.Response.DOCUMENTS][0];
            var id = doc[google.picker.Document.ID];
            // Show the ID of the Google Drive folder
            document.getElementById('result').innerHTML = id;
        } else if (action == google.picker.Action.CANCEL) {

    function showError(message) {
        document.getElementById('result').innerHTML = 'Error: ' + message;

        <p id='result'></p>
    <script type="text/javascript" src=""></script>

The upcoming release of Save Gmail attachments will include the Google Picker API to help users easily select the Google Drive folder for saving the file attachments.

Published in: Google Apps Script

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch