Using Google Picker with Google Apps Script

May 14, 2017

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.

// code.gs

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

/**
 * 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')
    .setWidth(600)
    .setHeight(425)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showModalDialog(html, 'Select Folder');
}

function getOAuthToken() {
  DriveApp.getRootFolder();
  return ScriptApp.getOAuthToken();
}

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

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css" />
    <script type="text/javascript">
      var DIALOG_DIMENSIONS = {
        width: 600,
        height: 425,
      };
      var pickerApiLoaded = false;

      function onApiLoad() {
        gapi.load('picker', {
          callback: function () {
            pickerApiLoaded = true;
          },
        });
        google.script.run.withSuccessHandler(createPicker).withFailureHandler(showError).getOAuthToken();
      }

      function createPicker(token) {
        if (pickerApiLoaded && token) {
          var docsView = new google.picker.DocsView()
            .setIncludeFolders(true)
            .setMimeTypes('application/vnd.google-apps.folder')
            .setSelectFolderEnabled(true);

          var picker = new google.picker.PickerBuilder()
            .addView(docsView)
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            .hideTitleBar()
            .setSize(DIALOG_DIMENSIONS.width - 2, DIALOG_DIMENSIONS.height - 2)
            .setOAuthToken(token)
            .setCallback(pickerCallback)
            .setOrigin('https://docs.google.com')
            .build();

          picker.setVisible(true);
        } 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
       * https://developers.google.com/picker/docs/result
       *
       * @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) {
          google.script.host.close();
        }
      }

      function showError(message) {
        document.getElementById('result').innerHTML = 'Error: ' + message;
      }
    </script>
  </head>

  <body>
    <div>
      <p id="result"></p>
    </div>
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>

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.

Google Apps Script

ShareWhatsAppTwitterFacebook

Amit Agarwal

Google Developer Expert, Google Cloud Champion

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.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory