title: How to add Google Drive Picker in Google web app
body: <p>what I'm trying to do is to show the Google Picker in my Google Web app. I already tried many ways to accomplish that, but nothing works.</p>
  
  <p>At the moment my code looks like this:</p>
  
  <p>WebApp.html</p>
  
  <pre><code>&lt;!-- rest of the code --&gt;
  
  &lt;button type="button" id="pick"&gt;Pick File&lt;/button&gt;
  &lt;/div&gt;
      &lt;script&gt;
          function initPicker() {
              var picker = new FilePicker({
                  apiKey: "####################",
                  clientId: "##########-##########################",
                  buttonEl: document.getElementById('pick'),
                  onSelect: function(file) {
                      alert('Selected ' + file.title);
                  } // onSelect
              }); // var picker
          } // function initPicker()
      &lt;/script&gt;
  
   &lt;!-- rest of the code --&gt;
  </code></pre>
  
  <p>WebAppJS.html</p>
  
  <pre><code>  /* rest of the code */
  
  var FilePicker = window.FilePicker = function(options) {
      this.apiKey = options.apiKey;
      this.clientId = options.clientId;
      this.buttonEl = options.buttonEl;
      this.onSelect = options.onSelect;
      this.buttonEl.addEventListener('click', this.open.bind(this));
      this.buttonEl.disabled = true;
      gapi.client.setApiKey(this.apiKey);
      gapi.client.load('drive', 'v2', this._driveApiLoaded.bind(this));
      google.load('picker', '1', { callback: this._pickerApiLoaded.bind(this) });
  }
  
  FilePicker.prototype = {
  open: function() {
  var token = gapi.auth.getToken();
  if (token) {
  this._showPicker();
  } else {
  this._doAuth(false, function() { this._showPicker(); }.bind(this));
  }
  },
  _showPicker: function() {
  var accessToken = gapi.auth.getToken().access_token;
  this.picker = new google.picker.PickerBuilder().
  addView(google.picker.ViewId.DOCUMENTS).
  setAppId(this.clientId).
  setOAuthToken(accessToken).
  setCallback(this._pickerCallback.bind(this)).
  build().
  setVisible(true);
  },
  
  _pickerCallback: function(data) {
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
      var file = data[google.picker.Response.DOCUMENTS][0],
      id = file[google.picker.Document.ID],
      request = gapi.client.drive.files.get({ fileId: id });
      request.execute(this._fileGetCallback.bind(this));
    }
  },
  
  _fileGetCallback: function(file) {
    if (this.onSelect) {
      this.onSelect(file);
    }
  },
  
  _pickerApiLoaded: function() {
    this.buttonEl.disabled = false;
  },
  
  _driveApiLoaded: function() {
    this._doAuth(true);
  },
  
  _doAuth: function(immediate1, callback) {
    gapi.auth.authorize({
      client_id: this.clientId + '.apps.googleusercontent.com',
      scope: 'https://www.googleapis.com/auth/drive.readonly',
      immediate: immediate1
    }, callback);
  }
  }; // FilePicker.prototype
  
  /* rest of the code */
  </code></pre>
  
  <p>For now, what this code does is showing kind of a popup, but empty. Code is based on <a href="https://gist.github.com/Daniel15" rel="nofollow noreferrer">Daniel15's code</a>.</p>
  
  <p>What I already tried is:</p>
  
  <ul>
  <li><p>relocating chunks of code, to server-side and client-side,</p></li>
  <li><p>using htmlOutput, htmlTemplate - non of those works,</p></li>
  <li><p>many other things, that i can't exactly remember.</p></li>
  </ul>
  
  <p>What I would like to get is answer to the question: Why this code doesn't show Google Picker.</p>
  
  <p>Thanks in advance.</p>