I want to view all files in google picker for that i am following this link:
/
but it returns The API developer key is invalid.
My code is as follows but that key is working properly in other projects:
<!DOCTYPE html>
<html xmlns="">
<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 Developers Console.
// Replace with your own Browser API key, or your own key.
var developerKey = 'AXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXM';
// The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
var clientId = "XXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent"
// Replace with your own App ID. (Its the first number in your Client ID)
var appId = "XXXXXXXXXXXX";
// Scope to use to access user's Drive items.
var scope = [''];
var pickerApiLoaded = false;
var oauthToken;
// Use the Google API Loader script to load the google.picker script.
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();
}
}
// Create and render a Picker object for searching images.
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);
}
}
// A simple callback implementation.
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
alert('The user selected: ' + fileId);
}
}
</script>
</head>
<body>
<div id="result"></div>
<!-- The Google API Loader script. -->
<script type="text/javascript" src=".js?onload=loadPicker"></script>
</body>
</html>
I want to view all files in google picker for that i am following this link:
https://developers.google./picker/docs/
but it returns The API developer key is invalid.
My code is as follows but that key is working properly in other projects:
<!DOCTYPE html>
<html xmlns="http://www.w3/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 Developers Console.
// Replace with your own Browser API key, or your own key.
var developerKey = 'AXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXM';
// The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
var clientId = "XXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent."
// Replace with your own App ID. (Its the first number in your Client ID)
var appId = "XXXXXXXXXXXX";
// Scope to use to access user's Drive items.
var scope = ['https://www.googleapis./auth/drive'];
var pickerApiLoaded = false;
var oauthToken;
// Use the Google API Loader script to load the google.picker script.
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();
}
}
// Create and render a Picker object for searching images.
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);
}
}
// A simple callback implementation.
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
alert('The user selected: ' + fileId);
}
}
</script>
</head>
<body>
<div id="result"></div>
<!-- The Google API Loader script. -->
<script type="text/javascript" src="https://apis.google./js/api.js?onload=loadPicker"></script>
</body>
</html>
- 1 What types of credentials did you add to google developers console? – Linda Lawton - DaImTo Commented Aug 26, 2015 at 7:02
- 2 I seem to be having the same issue. Credentials I have are an API Key where Type = "Browser". That is what I am passing into setDeveloperKey. I also have an OAuth 2.0 client ID where Type = "Web application". I am passing the clientId.split('-')[0] to setAppId. setOAuthToken is being passed a valid auth token that I am able to use to retrieve files from the Drive API. picker.setVisible(true) results in a popup that just says "The API developer key is invalid." If I remove the call to setDeveloperKey then the picker works. – Kwateco Commented Nov 13, 2015 at 14:47
1 Answer
Reset to default 6It seems you did not enabled "google picker API" in google console