Menu
I want to view all files in google picker for that i am following this link:
https://developers.google.com/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.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 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.com"
// 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.com/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.com/js/api.js?onload=loadPicker"></script>
</body>
</html>
446
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.
From the projects list, select a project or create a new one. If the APIs & services page isn't already open, open the left side menu and select APIs & services. On the left, choose Credentials. Click Create credentials and then select API key.
Resolve a 403 error: Daily limit exceeded This error appears when the application's owner has set a quota limit to cap usage of a particular resource. To fix this error, remove any usage caps for the "Queries per day" quota.
It seems you did not enabled "google picker API" in google console
90
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
