I am working on Google Drive Picker I have created a google Drive Picker By using google Sample code.
but I need to add a google picker inside my custom Div/Module. So I used google Api .toUri() that generates src and appends that src inside my custom Div. i am able to append the Picker to my custom Div then it shows me this error Screenshot of Error.
403. That’s an error.
We're sorry, but you do not have access to this page. That’s all we know.
<!DOCTYPE html>
<html>
<head>
<title>Picker API Quickstart</title>
<meta charset="utf-8" />
</head>
<body>
<p>Picker API API Quickstart</p>
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
<button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>
<pre id="content" style="white-space: pre-wrap;"></pre>
<div id="pickerDiv" class="picker-dialog" style="height: 500px; width:800px; border: 1px solid red; position: relative; top: 50%;"></div>
<script type="text/javascript">
const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';
const CLIENT_ID = '###########';
const API_KEY = '########';
const APP_ID = '######';
let tokenClient;
let accessToken = null;
let pickerInited = false;
let gisInited = false;
document.getElementById('authorize_button').style.visibility = 'hidden';
function gapiLoaded() {
gapi.load('picker', intializePicker);
}
function intializePicker() {
pickerInited = true;
maybeEnableButtons();
}
function gisLoaded() {
tokenClient = google.accounts.oauth2.initTokenClient({
client_id: CLIENT_ID,
scope: SCOPES,
callback: '', // defined later
});
gisInited = true;
maybeEnableButtons();
}
function maybeEnableButtons() {
if (pickerInited && gisInited) {
document.getElementById('authorize_button').style.visibility = 'visible';
}
}
function handleAuthClick() {
tokenClient.callback = async (response) => {
if (response.error !== undefined) {
throw (response);
}
accessToken = response.access_token;
document.getElementById('signout_button').style.visibility = 'visible';
document.getElementById('authorize_button').innerText = 'Refresh';
await createPicker();
};
if (accessToken === null) {
tokenClient.requestAccessToken({prompt: 'consent'});
} else {
tokenClient.requestAccessToken({prompt: ''});
}
}
function createPicker() {
const view = new google.picker.View(google.picker.ViewId.DOCS);
view.setMimeTypes("application/pdf,image/png,image/jpeg,image/jpg,image/gif,image/svg+xml,application/vnd.ms-excel,application/vnd.google-apps.spreadsheet,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.google-apps.document,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,video/x-flv,video/mp4,video/quicktime,video/mpeg,video/x-matroska,video/x-ms-asf,video/x-ms-wmv,video/avi,audio/mpeg,audio/wav,audio/ac3,audio/aac,audio/ogg,audio/oga,audio/x-m4a,application/zip")
const picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.setDeveloperKey(API_KEY)
.setAppId(APP_ID)
.setOAuthToken(accessToken)
.addView(view)
.addView(new google.picker.DocsUploadView())
.setCallback(pickerCallback)
.toUri()
const myDiv = document.getElementById('pickerDiv');
const iframe = document.createElement('iframe');
iframe.setAttribute("src", picker);
iframe.style.width = "100%";
iframe.style.height = "100%";
myDiv.appendChild(iframe)
}
function pickerCallback(data) {
if (data.action === google.picker.Action.PICKED) {
document.getElementById('content').innerText = JSON.stringify(data, null, 2);
}
}</script>
<script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
<style> .picker-dialog{
border: 1px solid red;
}</style>
</body>
</html>
