Menu
I started to learn Google Drive Picker API and started with my localhost (I have created my client id and browser key for the domain http://localhost/ and my files locations are localhost/ch1.html etc.
Here's the script I wrote in the body part of my document:
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script> <script> function onApiLoad(){ gapi.load('auth',{'callback':onAuthApiLoad}); gapi.load('picker'); } function onAuthApiLoad(){ window.gapi.auth.authorize({ 'client_id':'545195528713-tihc7u0hp9ihta5mrm4l0eon16fpjogi.apps.googleusercontent.com', 'scope':['https://www.googleapis.com/auth/drive'] },handleAuthResult); } var oauthToken; function handleAuthResult(authResult){ if(authResult && !authResult.error){ oauthToken = authResult.access_token; createPicker(); } } function createPicker(){ var picker = new google.picker.PickerBuilder() .addView(new google.picker.DocsUploadView()) .addView(new google.picker.DocsView()) .setOAuthToken(oauthToken) .setDeveloperKey('AIzaSyB3I3JOepScrZgySA9tBWL9pXAUaLJ-NFg') .build(); picker.setVisible(true); } </script> But when I run the doc it shows nothing. Is it like I can't use the drive api on localhost or I will have to use some button to call it or something like that please help.
Tested Example -
<!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" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script> <script> function onApiLoad(){ gapi.load('auth',{'callback':onAuthApiLoad}); gapi.load('picker'); } function onAuthApiLoad(){ window.gapi.auth.authorize({ 'client_id':'545195528713-tihc7u0hp9ihta5mrm4l0eon16fpjogi.apps.googleusercontent.com', 'scope':['https://www.googleapis.com/auth/drive'] },handleAuthResult); } var oauthToken; function handleAuthResult(authResult){ if(authResult && !authResult.error){ oauthToken = authResult.access_token; createPicker(); } } function createPicker(){ var picker = new google.picker.PickerBuilder() .addView(new google.picker.DocsUploadView()) .addView(new google.picker.DocsView()) .setOAuthToken(oauthToken) .setDeveloperKey('AIzaSyC4N7lg1vN6YrxcD5DDt_Iu0GXsF3QGFDU') .setCallback(pickerCallback) .build(); picker.setVisible(true); } 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"></div> <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script> </body> </html> 
452
Enable the Google Picker API If you haven't done so already, create your application's API key by clicking Create credentials > API key. Next, look for your API key in the API keys section. If you haven't done so already, create your OAuth 2.0 credentials by clicking Create credentials > OAuth client ID.
Resolve a 403 error: Project rate limit exceededRaise the per-user quota in the Google Cloud project. For more information, request a quota increase. Batch requests to make fewer API calls. Use exponential backoff to retry the request.
If you have registered your API key in EU domain(. eu) and configured API requests to US domain( .com), and vice versa, you will get "the API key is invalid" error. To resolve this issue, you need to send all your requests to the proper domain (US or EU).
You must enable picker api:
go https://console.developers.google.com/ select your project then click APIs & auth find Google Picker API and enable it.
I add .setCallback(pickerCallback) to createPicker function and add new function (pickerCallback)
complete 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" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script> <script> function onApiLoad(){ gapi.load('auth',{'callback':onAuthApiLoad}); gapi.load('picker'); } function onAuthApiLoad(){ window.gapi.auth.authorize({ 'client_id':'545195528713-tihc7u0hp9ihta5mrm4l0eon16fpjogi.apps.googleusercontent.com', 'scope':['https://www.googleapis.com/auth/drive'] },handleAuthResult); } var oauthToken; function handleAuthResult(authResult){ if(authResult && !authResult.error){ oauthToken = authResult.access_token; createPicker(); } } function createPicker(){ var picker = new google.picker.PickerBuilder() .addView(new google.picker.DocsUploadView()) .addView(new google.picker.DocsView()) .setOAuthToken(oauthToken) .setDeveloperKey('AIzaSyB3I3JOepScrZgySA9tBWL9pXAUaLJ-NFg') .setCallback(pickerCallback) .build(); picker.setVisible(true); } 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"></div> <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script> </body> </html> 
148
I don't know if Google has changed the API's since the accepted answer, but today, in January 2015, this worked for me, where the above answers didn't:
According to the Credentials page:
Public API access
Use of this key does not require any user action or consent, does not grant access to any account information, and is not used for authorization.
Elsewhere I read that the API/Developer/Browser key is not needed if oAuthToken is used. So, I amended the above code, by simply losing the line:
.setDeveloperKey('AIzaSyB3I3JOepScrZgySA9tBWL9pXAUaLJ-NFg') For completeness, here's the full amended code, hope it works for you:
<!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" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script> <script> function onApiLoad() { gapi.load('auth', { 'callback': onAuthApiLoad }); gapi.load('picker'); } function onAuthApiLoad() { window.gapi.auth.authorize({ 'client_id': '545195528713-tihc7u0hp9ihta5mrm4l0eon16fpjogi.apps.googleusercontent.com', 'scope': ['https://www.googleapis.com/auth/drive'] }, handleAuthResult); } var oauthToken; function handleAuthResult(authResult) { if (authResult && !authResult.error) { oauthToken = authResult.access_token; createPicker(); } } function createPicker() { var picker = new google.picker.PickerBuilder() //.addView(new google.picker.DocsUploadView()) .addView(new google.picker.DocsView()) .setOAuthToken(oauthToken) //.setDeveloperKey('AIzaSyDPs9U-dgOC9h1jRFNwOwhRtARCph8_3HM') .setCallback(pickerCallback) .build(); picker.setVisible(true); } 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"></div> <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
