Unable to close Google Picker Iframe

StackOverflow https://stackoverflow.com/questions/11079100

  •  15-06-2021
  •  | 
  •  

Question

I am Using Google Picker api to access my google drive folder's files. The following html page uses picker to load my google docs. However after I select a doc and press select option the picker dialog box is not closing. nor even when I press the close button on the right top of the iframe. I think the problrm is in the picker call back but I don't know how to recitfy this. I include the html page here.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

    <!-- The standard Google Loader script. -->
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

    // Use the Google Loader script to load the google.picker script.
    // google.setOnLoadCallback(createPicker);
    google.load('picker', '1');

    // Create and render a Picker object for searching images.
    function createPicker() {
        var picker = new google.picker.PickerBuilder().
            addView(google.picker.ViewId.DOCS).
            setCallback(pickerCallback).
            build();
        picker.setVisible(true);
    }

    // A simple callback implementation.
    function pickerCallback(data) {
      var url = 'nothing';
      if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        var doc = data[google.picker.Response.DOCUMENTS][0];
        url = doc[google.picker.Document.URL];
      }
      var message = 'You picked: ' + url;
      document.getElementById('result').innerHTML = message;
    }
    </script>
  </head>
  <body>
    <div id="result">
      <button onclick="createPicker()">Upload Files </button>
      <iframe></iframe>
    </div>
  </body>
</html>
Was it helpful?

Solution 2

The problem is that i didnt use a google api key to authenticate my communicating with google...Once the close is activated it calls pickercallback with a json file provided by google... which is not authenticated when i dont have a key...

The problem is with this line...

<script src="http://www.google.com/jsapi"></script>

It should be like ..

<script src="http://www.google.com/jsapi?key=#########################"></script>

replace #'s with your google api console key....you can generate a key here https://code.google.com/apis/console/

OTHER TIPS

The Picker requires some cross-domain communication that cannot be done if you open the page locally (e.g. open the html file from your disk).

Host the same page on a web server and it should work as expected.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top