javascriptgoogle-apigoogle-picker

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin


I'm trying to allow users to select files from their google drive via google picker. I have followed [official][1] docs/example. But getting the followings errors in the browsers console:

I've done the following when setting up on google developer console:

I've tried deploying my application as well but still got the same error.

Here is the code I'm using:

var developerKey = 'xxxxxxxYYYYYYYY-12345678';

var clientId = "1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com"

var appId = "1234567890";

var scope = ['https://www.googleapis.com/auth/drive.file'];

var pickerApiLoaded = false;
var oauthToken;

function loadPicker() {
  gapi.load('auth', {'callback': onAuthApiLoad});
  gapi.load('picker', {'callback': onPickerApiLoad});
}

function onAuthApiLoad() {
  window.gapi.auth.authorize(
      {
        'client_id': clientId,
        'scope': scope,
        'immediate': false
      },
      handleAuthResult);
}

function onPickerApiLoad() {
  pickerApiLoaded = true;
  createPicker();
}

function handleAuthResult(authResult) {
  if (authResult && !authResult.error) {
    oauthToken = authResult.access_token;
    createPicker();
  }
}

function createPicker() {
  if (pickerApiLoaded && oauthToken) {
    var view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes("image/png,image/jpeg,image/jpg");
    var picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setAppId(appId)
        .setOAuthToken(oauthToken)
        .addView(view)
        .addView(new google.picker.DocsUploadView())
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
     picker.setVisible(true);
  }
}

function pickerCallback(data) {
  if (data.action == google.picker.Action.PICKED) {
    var fileId = data.docs[0].id;
    alert('The user selected: ' + fileId);
  }
}

Am I doing something wrong? [1]: https://developers.google.com/picker/docs


Solution

  • This is a reported bug

    https://issuetracker.google.com/177046274

    I would go and star these issues to let Google know that they affect you.

    I can reproduce it, the picker works, but this error appears:

    Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:8000').
    

    Another related bug

    On a related note, if you want to have thumbnails appear in the picker, you need to use the more expansive drive.readonly, or drive scope:

    https://issuetracker.google.com/64622983