How to add Google Drive Picker in Google web app

Question

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.

At the moment my code looks like this:

WebApp.html

<!-- rest of the code -->

<button type="button" id="pick">Pick File</button>
</div>
    <script>
        function initPicker() {
            var picker = new FilePicker({
                apiKey: "####################",
                clientId: "##########-##########################",
                buttonEl: document.getElementById('pick'),
                onSelect: function(file) {
                    alert('Selected ' + file.title);
                } // onSelect
            }); // var picker
        } // function initPicker()
    </script>

 <!-- rest of the code -->

WebAppJS.html

  /* 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 */

For now, what this code does is showing kind of a popup, but empty. Code is based on Daniel15's code.

What I already tried is:

relocating chunks of code, to server-side and client-side,
using htmlOutput, htmlTemplate - non of those works,
many other things, that i can't exactly remember.

What I would like to get is answer to the question: Why this code doesn't show Google Picker.

Thanks in advance.

Have you seen the documentation at the following link? [Apps Script - File Open](https://developers.google.com/apps-script/guides/dialogs#file-open_dialogs) — Alan Wells, Jul 19 '15 at 19:22
I already tried this option, but the only way I could show the Picker was to show it on completely new page, not as a popup. — Kacper Knapik, Jul 19 '15 at 19:36
Are you getting any errors? If so, what line is the error coming from? — Alan Wells, Jul 19 '15 at 20:43

score 3 · Accepted Answer · answered Jul 19 '15 at 20:56

3

Try adding a call origin and developer key

_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))

  .setOrigin('https://script.google.com') //
  .setDeveloperKey(BROWSERKEYCREATEDINAPICONSOLE) //

  .build()
  .setVisible(true);
},

answered Jul 19 '15 at 20:56

JSDBroughton

3,966
4
32
52

is it a API Key? because after adding those 2 things, there is an error The 'API developer key is invalid.' – Kacper Knapik Jul 19 '15 at 21:08
It is a browser client key, you may have already enabled an api key, but you need specifically to use a Create and use a browser key client ID. Also you'll need to have specifically enabled google picker in the console. Sorry if you have already done this. – JSDBroughton Jul 19 '15 at 21:15
Great! I've also wrestled a few different ways around this problem. – JSDBroughton Jul 19 '15 at 21:23
you can share your other solutions too – Kacper Knapik Jul 19 '15 at 21:54
Mentozz - I'm also trying to get an apps script web app to display the Picker, but failing. And I can't get your code above to work. Is there any chance you could share a working script ?? – Andrew Roberts Jun 02 '17 at 19:00
@AndrewRoberts is it hanging? you may want to check out a recent discussion around this: https://stackoverflow.com/questions/43273493/cannot-call-google-script-api-functions-from-web-app-typeerror-cannot-read-pro/43284867#43284867 – JSDBroughton Jun 02 '17 at 23:59
2

Got mine working with this very simple script that doesn't use any API or client IDs: http://blog.richardaanderson.org/2015/09/curriculum-mapping-build-web-app-to.html. – Andrew Roberts Jun 03 '17 at 06:11
@JSDBroughton Thanks .setOrigin('https://script.google.com') worked like a charm! – lisichka ggg Jun 01 '23 at 20:03

How to add Google Drive Picker in Google web app

1 Answers1