USA Database

If your app needs to let a user pick a file from his Google Drive, you might consider using the Google Picker API.

I recently implemented the Picker for my users because I need to let users choose a Google Sheet from their account, and in some rare cases, Google Drive access is blocked the G Suite Admin, rendering my egypt phone number material code that lists Sheets from Google Drive useless. The Picker is an alternative that doesn’t require Drive access, and so it allows my users to pick a spreadsheet from their account, even though Google Drive access may be denied by their G Suite admin.

In implementing the Picker API, I encountered several challenges and subsequently came up with several advanced techniques that you also might find useful.



The main documentation for the Picker API is here. After you get the example provided by Google working, here are a few advanced techniques you might find useful.

Open the Picker in a popup, and return the file’s ID to the main window
In your web app, you might link to the Picker and then open it in a popup. Normally it’s just a matter of simple JavaScript to return a value from the popup to the main window, and many have written about how to do that. What if, however, you’re launching the Picker from a Chrome extension, and the Chrome extension is running on a site for which you don’t have any control, like Gmail. If you use the normal technique to retrieve the value from the popup, you’ll get this error in the Console:

SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.
The only known way around this is to use the window.postMessage function to pass a message from the popup to the main window, as explained here. In this case, the message is the ID of the file the user has chosen from his Google Drive, prepended by the string “spreadsheetid—” so that I know the message is from my popup.

Here’s the code from my Picker HTML:

function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
window.opener.postMessage('spreadsheetid---' + fileId, '*');
window.close();
}
}
And here’s the code in the parent window.

window.addEventListener('message', function(event) {
if (event.data.toString().includes('spreadsheetid---')) {
SpreadsheetId = event.data.toString();
}
});
Retrieve the file ID without access to any scopes
If you read the Google documentation for the Picker API, you might assume that to use it, you must request access to the “drives” scope.

Google’s documentation even states:

Note: For a list of valid views, refer to ViewId in the Google Picker reference. To obtain the token for any of these views, use the

And in the sample code, we find this:

Google Picker code