title: Open Google File Picker from Add-on Sidebar
body: <p>I am looking to load a Google Drive file picker by clicking a button within a Google Form add-on sidebar.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>I have not been able to work out how to load the picker (in a modal dialog) directly from the sidebar, then callback the document id to the sidebar.</p>
  
  <p>I have been able to successfully load a modal dialog and then load the picker from the modal dialog, however am struggling to understand how to load the picker directly from the sidebar. </p>
  
  <p>Any guidance is appreciated. My current code is shown below. </p>
  
  <p><strong>.gs file:</strong></p>
  
  <pre><code>function onOpen(e) {
    FormApp.getUi()
    .createAddonMenu()
    .addItem('Picker', 'showSidebar')
    .addToUi();
  }
  
  function showSidebar(){
  
      var ui = HtmlService.createHtmlOutputFromFile('Sidebar')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setTitle('Title');
    FormApp.getUi().showSidebar(ui);
  
  }
  
  function openPicker(){
  
    var html = HtmlService.createHtmlOutputFromFile('Picker')
    .setWidth(600)
    .setHeight(425)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
    FormApp.getUi().showModalDialog(html, 'Select a file');
  
  }
  
  
  function getOAuthToken() {
    DriveApp.getRootFolder();
    return ScriptApp.getOAuthToken();
  }
  </code></pre>
  
  <p><strong>sidebar html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
    &lt;link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css"&gt;
      &lt;base target="_top"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;button onclick='openPicker()'&gt;Select a file&lt;/button&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  
  function openPicker() {
  google.script.run
  .withSuccessHandler(success)
  .withFailureHandler(failure)
  .openPicker();
  }
  
  function success() {
  console.log('success');
  }
  
  function failure() {
  console.log('failure');
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>picker html</strong></p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css"&gt;
    &lt;script&gt;
  
      var DEVELOPER_KEY = '';
      var DIALOG_DIMENSIONS = {width: 600, height: 425};
      var pickerApiLoaded = false;
  
  
      function onApiLoad() {
        gapi.load('picker', {'callback': function() {
          pickerApiLoaded = true;
        }});
       }
  
  
      function getOAuthToken() {
        google.script.run
        .withSuccessHandler(createPicker)
        .withFailureHandler(showError)
        .getOAuthToken();
      }
  
  
      function createPicker(token) {
      console.log("here");
        if (pickerApiLoaded &amp;&amp; token) {
          var picker = new google.picker.PickerBuilder()
              // Instruct Picker to display only spreadsheets in Drive. For other
              // views, see https://developers.google.com/picker/docs/#otherviews
              .addView(google.picker.ViewId.DOCUMENTS)
              // Hide the navigation panel so that Picker fills more of the dialog.
              .enableFeature(google.picker.Feature.NAV_HIDDEN)
              // Hide the title bar since an Apps Script dialog already has a title.
              .hideTitleBar()
              .setOAuthToken(token)
              .setDeveloperKey(DEVELOPER_KEY)
              .setCallback(pickerCallback)
              .setOrigin(google.script.host.origin)
              // Instruct Picker to fill the dialog, minus 2 pixels for the border.
              .setSize(DIALOG_DIMENSIONS.width - 2,
                  DIALOG_DIMENSIONS.height - 2)
              .build();
          picker.setVisible(true);
        } else {
          showError('Unable to load the file picker.');
        }
      }
  
  
      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];
          var url = doc[google.picker.Document.URL];
          var title = doc[google.picker.Document.NAME];
          document.getElementById('result').innerHTML =
              '&lt;b&gt;You chose:&lt;/b&gt;&lt;br&gt;Name: &lt;a href="' + url + '"&gt;' + title +
              '&lt;/a&gt;&lt;br&gt;ID: ' + id;
        } else if (action == google.picker.Action.CANCEL) {
          document.getElementById('result').innerHTML = 'Picker canceled.';
        }
      }
  
  
      function showError(message) {
        document.getElementById('result').innerHTML = 'Error: ' + message;
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div&gt;
      &lt;button onclick='getOAuthToken()'&gt;Select a file&lt;/button&gt;
      &lt;p id='result'&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;script src="https://apis.google.com/js/api.js?onload=onApiLoad"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>