I'm trying to use Google Drive Picker API to browse files from my Google Drive. I'm following the "Hello World" tutorial from Google's page. For some reason, Google Picker is not popping up after I click "Authenticate" & select my account.
Code
<!DOCTYPE html>
<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>
<script type="text/javascript">
// The Browser API key obtained from the Google API Console.
var developerKey = 'AIzaSyAPQ6_NT8CT7NA1yXN0vF979tuoqN4pQ64';
// The Client ID obtained from the Google API Console. Replace with your own Client ID.
var clientId = '475080196216-04bp4cln61011q4vsocb69gve0tvt6ek.apps.googleusercontent.com';
// Scope to use to access user's photos.
var scope = 'https://www.googleapis.com/auth/photos';
var pickerApiLoaded = false;
var oauthToken;
// Use the API Loader script to load google.picker and gapi.auth.
function onApiLoad() {
gapi.load('auth2', onAuthApiLoad);
gapi.load('picker', onPickerApiLoad);
}
function onAuthApiLoad() {
var authBtn = document.getElementById('auth');
authBtn.disabled = false;
authBtn.addEventListener('click', function() {
gapi.auth2.authorize({
client_id: clientId,
scope: scope
}, handleAuthResult);
});
}
function onPickerApiLoad() {
pickerApiLoaded = true;
createPicker();
}
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
oauthToken = authResult.access_token;
createPicker();
}
}
// Create and render a Picker object for picking user Photos.
function createPicker() {
if (pickerApiLoaded && oauthToken) {
var picker = new google.picker.PickerBuilder().
addView(google.picker.ViewId.PHOTOS).
setOAuthToken(oauthToken).
setDeveloperKey(developerKey).
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>
<button type="button" id="auth" disabled>Authenticate</button>
<div id="result"></div>
<!-- The Google API Loader script. -->
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
</body>
</html>
Hosted Link : https://shihankhan.com/research/picker.html
Tutorial Link : https://developers.google.com/picker/docs/#hiworld
Not sure what I'm doing wrong here. I don't even get any errors in the console. It'll be really helpful if someone could show me how to get it work. Thanks!
