I am getting a 404 error on the URL of the Google API that I am using for authentication.
Failed to load resource: the server responded with a status of 404 ()
What am I doing wrong?
I have enabled the API and set up the apiKey and the clientId in the console.
This is my gapi.js file:
// Enter an API key from the Google API Console:
// https://console.developers.google.com/apis/credentials
var apiKey = '<removed>';
// Enter the API Discovery Docs that describes the APIs you want to
// access. In this example, we are accessing the People API, so we load
// Discovery Doc found here: https://developers.google.com/people/api/rest/
var discoveryDocs = ["https://people.googleapis.com/$discovery/rest?version=v1"];
// Enter a client ID for a web application from the Google API Console:
https://console.developers.google.com/apis/credentials?project=<removed>
// In your API Console project, add a JavaScript origin that corresponds
// to the domain where you will be running the script.
var clientId = '<removed>.apps.googleusercontent.com';
// Enter one or more authorization scopes. Refer to the documentation for
// the API or https://developers.google.com/people/v1/how-tos/authorizing
// for details.
var scopes = 'https://www.googleapis.com/auth/cloud-platform';
var authorizeButton = document.getElementById('authorize-button');
var signoutButton = document.getElementById('signout-button');
var mainDiv = document.getElementById('main');
var editNav = document.getElementById('edit');
function handleClientLoad() {
// Load the API client and auth2 library
gapi.load('client:auth2', initClient);
}
function initClient() {
gapi.client.init({
apiKey: apiKey,
discoveryDocs: discoveryDocs,
clientId: clientId,
scope: scopes
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
});
}
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'inline-block';
mainDiv.style.display = 'block';
editNav.style.display = 'block';
makeApiCall();
} else {
authorizeButton.style.display = 'inline-block';
signoutButton.style.display = 'none';
mainDiv.style.display = 'none';
editNav.style.display = 'none';
}
}
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
var loggedin = document.getElementById("loggedinuser");
loggedin.parentNode.removeChild(loggedin);
var userStatus = document.getElementById("user_status");
userStatus.parentNode.removeChild(userStatus);
}
// Load the API and make an API call. Display the results on the screen.
function makeApiCall() {
gapi.client.people.people.get({
'resourceName': 'people/me',
'requestMask.includeField': 'person.names,person.emailAddresses'
}).then(function(resp) {
//console.log(resp.result);
var name = resp.result.names[0].givenName;
var email = resp.result.emailAddresses[0].value;
authorizeButton.insertAdjacentHTML('beforebegin', '<span id="loggedinuser" rel="' + email + '">Logged in as ' + name + '</span>');
var permittedUsers = [];
var accessLevels = document.getElementsByClassName('access');
for (var c=0, len=accessLevels.length; c<len; c++){
permittedUsers.push(accessLevels[c].getAttribute('rel'),accessLevels[c].getAttribute('id'));
var status = accessLevels[c].childNodes[0].textContent;
if(status == 'Admin' && (accessLevels[c].getAttribute('rel') == email || accessLevels[c].getAttribute('id') == email)) {
signoutButton.insertAdjacentHTML('beforebegin', '<span id="user_status" rel="Admin">[Admin]</span>');
}
}
if(permittedUsers.includes(email)) {
//do nothing
} else {
mainDiv.style.display = 'none';
editNav.style.display = 'none';
mainDiv.insertAdjacentHTML('beforebegin', '<p id="unauthorised">You are not authorised to view this page.</p>');
setTimeout(function(){
authorizeButton.style.display = 'none';
signoutButton.style.display = 'inline-block';
var notAuth = document.getElementById("unauthorised");
unauthorised.parentNode.removeChild(unauthorised);
signoutButton.click();
}, 1000);
}
});
}
This is my HTML:
<header class="header" role="banner">
<section id="login" class="right">
<button id="authorize-button" style="display: none;">Log in</button>
<button id="signout-button" style="display: none;">Log out</button>
</section>
<div id="title" class="sitename">
<h1>app title</h1>
</div>
</header>
and at the end of the page:
<script src="js/gapi.js"></script>
<script async defer src="js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
Related
I have tried making a web application using Google Drive and Gmail APIs.
When I ask for Google Drive or Gmail permission, all works correctly, but when I try asking for both permissions , the program only asks for one of them (either Google Drive or Gmail).
This is the code which asks for Google Drive permissions, extracted from:https://developers.google.com/drive/api/v3/quickstart/js
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<p></p>
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize_button" style="display: none;">Authorize</button>
<button id="signout_button" style="display: none;">Sign Out</button>
<pre id="content" style="white-space: pre-wrap;"></pre>
<script type="text/javascript">
// Client ID and API key from the Developer Console
var CLIENT_ID = '<YOUR_CLIENT_ID>';
var API_KEY = '<YOUR_API_KEY>';
// Array of API discovery doc URLs for APIs used by the quickstart
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];
// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
var SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';
var authorizeButton = document.getElementById('authorize_button');
var signoutButton = document.getElementById('signout_button');
/**
* On load, called to load the auth2 library and API client library.
*/
function handleClientLoad() {
gapi.load('client:auth2', initClient);
}
/**
* Initializes the API client library and sets up sign-in state
* listeners.
*/
function initClient() {
gapi.client.init({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
scope: SCOPES
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
}, function(error) {
appendPre(JSON.stringify(error, null, 2));
});
}
/**
* Called when the signed in status changes, to update the UI
* appropriately. After a sign-in, the API is called.
*/
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
listFiles();
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
/**
* Sign in the user upon button click.
*/
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
/**
* Sign out the user upon button click.
*/
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
/**
* Append a pre element to the body containing the given message
* as its text node. Used to display the results of the API call.
*
* #param {string} message Text to be placed in pre element.
*/
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
/**
* Print files.
*/
function listFiles() {
gapi.client.drive.files.list({
'pageSize': 10,
'fields': "nextPageToken, files(id, name)"
}).then(function(response) {
appendPre('Files:');
var files = response.result.files;
if (files && files.length > 0) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
appendPre(file.name + ' (' + file.id + ')');
}
} else {
appendPre('No files found.');
}
});
}
</script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body>
</html>
And this is the code which asks for Gmail permissions, extracted from:https://developers.google.com/gmail/api/quickstart/js
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<p></p>
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize_button" style="display: none;">Authorize</button>
<button id="signout_button" style="display: none;">Sign Out</button>
<pre id="content" style="white-space: pre-wrap;"></pre>
<script type="text/javascript">
// Client ID and API key from the Developer Console
var CLIENT_ID = '<YOUR_CLIENT_ID>';
var API_KEY = '<YOUR_API_KEY>';
// Array of API discovery doc URLs for APIs used by the quickstart
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest"];
// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
var SCOPES = 'https://www.googleapis.com/auth/gmail.readonly';
var authorizeButton = document.getElementById('authorize_button');
var signoutButton = document.getElementById('signout_button');
/**
* On load, called to load the auth2 library and API client library.
*/
function handleClientLoad() {
gapi.load('client:auth2', initClient);
}
/**
* Initializes the API client library and sets up sign-in state
* listeners.
*/
function initClient() {
gapi.client.init({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
scope: SCOPES
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
}, function(error) {
appendPre(JSON.stringify(error, null, 2));
});
}
/**
* Called when the signed in status changes, to update the UI
* appropriately. After a sign-in, the API is called.
*/
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
listLabels();
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
/**
* Sign in the user upon button click.
*/
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
/**
* Sign out the user upon button click.
*/
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
/**
* Append a pre element to the body containing the given message
* as its text node. Used to display the results of the API call.
*
* #param {string} message Text to be placed in pre element.
*/
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
/**
* Print all Labels in the authorized user's inbox. If no labels
* are found an appropriate message is printed.
*/
function listLabels() {
gapi.client.gmail.users.labels.list({
'userId': 'me'
}).then(function(response) {
var labels = response.result.labels;
appendPre('Labels:');
if (labels && labels.length > 0) {
for (i = 0; i < labels.length; i++) {
var label = labels[i];
appendPre(label.name)
}
} else {
appendPre('No Labels found.');
}
});
}
</script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body>
</html>
I have tried different ways to ask for both permissions, but no one of them has worked.
How do I ask for Gmail and Google Drive permissions at the same time?
PD: sorry for my English and for making a very long question :(
The difference between the two codes are the discovery docs and scopes used for the initiation of the gapi client
If you want to initialize a gapi client that it capable of performing both Gmail and Drive requests, you need to merge the respective discovery docs and scopes.
As stated in the comments of the code samples:
// Array of API discovery doc URLs for APIs used by the quickstart
and
// Authorization scopes required by the API; multiple scopes can be //
included, separated by spaces.
This means:
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest", "https://sheets.googleapis.com/$discovery/rest?version=v4"];
and
var SCOPES = "https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/spreadsheets.readonly";
Also, if the signIn is successful, either the function listFiles(); or listMajors(); is called, but to combine both functionalities, you probably want to call both functions (or merge them into one).
So in summary:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<p></p>
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize_button" style="display: none;">Authorize</button>
<button id="signout_button" style="display: none;">Sign Out</button>
<pre id="content" style="white-space: pre-wrap;"></pre>
<script type="text/javascript">
// Client ID and API key from the Developer Console
var CLIENT_ID = '199656296815-7rivr6cr4oj1fhprdptrq9evi6gvrrji.apps.googleusercontent.com';
var API_KEY = 'AIzaSyCpC-SyaoUN95t8gANPgPQptEW-7B57aCI';
// Array of API discovery doc URLs for APIs used by the quickstart
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest", "https://sheets.googleapis.com/$discovery/rest?version=v4"];
// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
var SCOPES = "https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/spreadsheets.readonly";
var authorizeButton = document.getElementById('authorize_button');
var signoutButton = document.getElementById('signout_button');
/**
* On load, called to load the auth2 library and API client library.
*/
function handleClientLoad() {
gapi.load('client:auth2', initClient);
}
/**
* Initializes the API client library and sets up sign-in state
* listeners.
*/
function initClient() {
gapi.client.init({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
scope: SCOPES
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
}, function(error) {
appendPre(JSON.stringify(error, null, 2));
});
}
/**
* Called when the signed in status changes, to update the UI
* appropriately. After a sign-in, the API is called.
*/
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
listFiles();
listMajors();
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
/**
* Sign in the user upon button click.
*/
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
/**
* Sign out the user upon button click.
*/
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
/**
* Append a pre element to the body containing the given message
* as its text node. Used to display the results of the API call.
*
* #param {string} message Text to be placed in pre element.
*/
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
/**
* Print files.
*/
function listFiles() {
gapi.client.drive.files.list({
'pageSize': 10,
'fields': "nextPageToken, files(id, name)"
}).then(function(response) {
appendPre('Files:');
var files = response.result.files;
if (files && files.length > 0) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
appendPre(file.name + ' (' + file.id + ')');
}
} else {
appendPre('No files found.');
}
});
}
function listMajors() {
gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
range: 'Class Data!A2:E',
}).then(function(response) {
var range = response.result;
if (range.values.length > 0) {
appendPre('Name, Major:');
for (i = 0; i < range.values.length; i++) {
var row = range.values[i];
// Print columns A and E, which correspond to indices 0 and 4.
appendPre(row[0] + ', ' + row[4]);
}
} else {
appendPre('No data found.');
}
}, function(response) {
appendPre('Error: ' + response.result.error.message);
});
}
</script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body>
</html>
I have a problem with Google Calendar that I am unable to resolve. Here is the scenario: I had implemented it successfully using JavaScript as described in the quickstart guide
Now it just stopped working without changing anything.
Here is the code of my quickstart.html:
<!DOCTYPE html>
<html>
<head>
<title>Say hello using the People API</title>
<meta charset='utf-8' />
</head>
<body>
<p>Say hello using the People API.</p>
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize-button" style="display: none;">Autoriser </button>
<button id="signout-button" style="display: none;">se deconecter</button>
<div id="content"></div>
<pre id="output"></pre>
<script type="text/javascript">
console.log('im execusted');
var dateaud = localStorage.getItem("date1")
var jDate = new Date(dateaud);
var nd = jDate.toISOString();
var numdossier = localStorage.getItem("casenumber");
var notes = localStorage.getItem("notes");
var summary = numdossier + ' ' +notes ;
// Enter an API key from the Google API Console:
// https://console.developers.google.com/apis/credentials?project=_
var apiKey = 'mykey';
// cette clé est dispo via creer api key
// Enter a client ID for a web application from the Google API Console:
// https://console.developers.google.com/apis/credentials?project=_
// In your API Console project, add a JavaScript origin that corresponds
// to the domain where you will be running the script.
var clientId = 'myclientid';
// Enter one or more authorization scopes. Refer to the documentation for
// the API or https://developers.google.com/identity/protocols/googlescopes
// for details.
var scopes = 'https://www.googleapis.com/auth/calendar';
var auth2; // The Sign-In object.
var authorizeButton = document.getElementById('authorize-button');
var signoutButton = document.getElementById('signout-button');
function handleClientLoad() {
// Load the API client and auth library
gapi.load('client:auth2', initAuth);
}
function initAuth() {
gapi.client.setApiKey(apiKey);
gapi.auth2.init({
client_id: clientId,
scope: scopes
}).then(function () {
auth2 = gapi.auth2.getAuthInstance();
// Listen for sign-in state changes.
auth2.isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(auth2.isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
});
}
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
makeApiCall();
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
function handleAuthClick(event) {
auth2.signIn();
}
function handleSignoutClick(event) {
auth2.signOut();
}
// Load the API and make an API call. Display the results on the screen.
function makeApiCall() {
gapi.client.load('calendar', 'v3', function() {
var event = {
'summary': summary,
'description': notes,
'start': {
'dateTime': nd,
'timeZone': 'Africa/Casablanca'
},
'end': {
'dateTime': nd,
'timeZone': 'Africa/Casablanca'
}
};
var request = gapi.client.calendar.events.insert({
'calendarId': 'primary',
'resource': event
});
request.execute(function(event) {
alert(nd);
appendPre('événement crée avec succée .: ' + event.htmlLink);
});
});
}
function appendPre(message) {
var pre = document.getElementById('output');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
</script>
<script src="https://apis.google.com/js/api.js?onload=handleClientLoad"></script>
</body>
</html>
When I call this URL, filling the parameters out correctly for my event using this code:
<script>
function addcal(){
var date1=document.getElementById('date1').value;
var casenumber=document.getElementById("casenumber").innerText;
var notes=document.getElementById("notes").value;
var resultat=document.getElementById('resultat');
localStorage.setItem('date1', date1);
localStorage.setItem('casenumber', casenumber);
localStorage.setItem('notes', notes);
localStorage.setItem('resultat', resultat);
window.open('http://mywebsie.com/quickstart.html', 'newwindow', 'width=600, height=400');
}
</script>
I get a blank page, with no HTML code in it when showing source code. There are no JavaScript errors.
Can anyone help me with this?
good news
the issues was coming from nginx , on the server it's set as a proxy to apache , so desabling it solved my issue.
Trying to rename all files in folder, nothing much, just want to add an prefix in all files, using Javascript. Getting error as: "Uncaught TypeError: gapi.client.drive.files.patch is not a function"
listFiles Function is able to fetch the file id and current name, but gapi.client.drive.files.patch throws above error.
Tried with gapi.client.drive.properties.patch but it also gave an error.!
Code:
<button id="authorize-button" style="display: none;">Authorize</button>
<button id="signout-button" style="display: none;">Sign Out</button>
<p id="list" style="display: none;">Enter Folder ID:
<input type="text" id="listInput" size="40" />
<button id="list-button" onClick="listFiles();">Get List</button></p>
<pre id="content"></pre>
<script type="text/javascript">
var CLIENT_ID = '';
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];
var SCOPES = 'https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/drive.appdata https://www.googleapis.com/auth/drive.apps.readonly https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/drive.metadata https://www.googleapis.com/auth/drive.scripts';
var authorizeButton = document.getElementById('authorize-button');
var signoutButton = document.getElementById('signout-button');
var pre = document.getElementById('content');
var list = document.getElementById('list');
var listInput = document.getElementById('listInput');
var listButton = document.getElementById('list-button');
function handleClientLoad() {
gapi.load('client:auth2', initClient);
}
function initClient() {
gapi.client.init({
discoveryDocs: DISCOVERY_DOCS,
clientId: CLIENT_ID,
scope: SCOPES
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
});
}
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
list.style.display = 'block';
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
list.style.display = 'none';
clearPre();
}
}
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
function appendPre(message) {
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
function clearPre() {
pre.innerHTML = "";
}
function listFiles() {
clearPre();
appendPre('Getting Files List......');
gapi.client.drive.files.list({
'q' : "'" + listInput.value + "' in parents",
'orderBy' : 'name',
'pageSize': 1000,
'fields': "nextPageToken, files(id, name, parents, mimeType)"
}).then(function(response) {
clearPre();
var files = response.result.files;
console.log(files);
if (files && files.length > 0) {
var currentFile;
var currentFileId;
appendPre('Count: ' + files.length + ' Files:');
for (var i = 0; i < files.length; i++) {
currentFile = files[i].name;
currentFileId = files[i].id;
appendPre(currentFile);
alert(currentFileId + ' Rename ' + currentFile);
*********Getting Error here*********
var request = gapi.client.drive.files.patch({
'fileId': currentFileId,
'resource': {'title': 'Rename ' + currentFile}
});
request.execute(function(resp) {
console.log('New Title: ' + resp.title);
});
}
} else {
appendPre('No files found.');
}
});
}
</script>
<script async defer src="https://apis.google.com/js/api.js" nload="this.onload=function(){};handleClientLoad()" onreadystatechange="if this.readyState === 'complete') this.onload()">
</script>
I can see in your code that you are using V3.
gapi.client.drive.files.patch is deprecated in the said version, you can use Files: update instead, to update the desired filenames.
Or other way around, you can switch to V2 and use the code provided in the documentation.
/**
* Rename a file.
*
* #param {String} fileId <span style="font-size: 13px; ">ID of the file to rename.</span><br> * #param {String} newTitle New title for the file.
*/
function renameFile(fileId, newTitle) {
var body = {'title': newTitle};
var request = gapi.client.drive.files.patch({
'fileId': fileId,
'resource': body
});
request.execute(function(resp) {
console.log('New Title: ' + resp.title);
});
}
Appreciate the original question was Javascript and V2 of the Google Drive API...
Trying to use Python and V3, it took me a while to work out how to do this. The bit I was missing was the body={} keyword argument that you need to submit the name property.
Assuming you've already gotten the file_id you want to rename in a separate call, like this:
drive.files().update(
fileId=file_id,
supportsAllDrives='true',
body={'name': 'new name for this file'}
).execute()
After 3 attempts to use other folks NPM modules for Google Drive, I decided it was time to do my own and I was JUST adding mv() functionality so I had this fight and here's what I came up with and use in my library. It isn't public today and will change names, but if anyone wants to try a beta version, hit me up on twitter by this same name.
note:
You only need addParents and removeParents if you're "moving" a file and you only need name if you're actually going to rename it.
drive.files.update({
fileId: driveFileId,
addParents: commaStringOfParents,
removeParents: commaStringOfParents,
resource: { name: newFileName }
}, (err, res) => {
if (err) handleError(err);
let files = res.data
// Do stuff here
}
I am trying to upload file into my Google drive account using a webpage form. I select a file and I have to upload it into my Google drive using JavaScript API so, if any solution is have anyone the help me.
Here is one sample code for access Google drive, but I could not get the uploading file code.
<!--Add a button for the user to click to initiate auth sequence -->
<button id="authorize-button" style="visibility: hidden">Authorize</button>
<script type="text/javascript">
var clientId = '######';
var apiKey = 'aaaaaaaaaaaaaaaaaaa';
// To enter one or more authentication scopes, refer to the documentation for the API.
var scopes = "https://www.googleapis.com/auth/drive";
// Use a button to handle authentication the first time.
function handleClientLoad() {
gapi.client.setApiKey(apiKey);
window.setTimeout(checkAuth,1);
}
function checkAuth() {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
authorizeButton.style.visibility = 'hidden';
makeApiCall();
} else {
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
}
}
function handleAuthClick(event) {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
return false;
}
// Load the API and make an API call. Display the results on the screen.
function makeApiCall() {
gapi.client.load('drive', 'v2', function() {
var request = gapi.client.drive.files.list ( {'maxResults': 5 } );
request.execute(function(resp) {
for (i=0; i<resp.items.length; i++) {
var titulo = resp.items[i].title;
var fechaUpd = resp.items[i].modifiedDate;
var userUpd = resp.items[i].lastModifyingUserName;
var fileInfo = document.createElement('li');
fileInfo.appendChild(document.createTextNode('TITLE: ' + titulo + ' - LAST MODIF: ' + fechaUpd + ' - BY: ' + userUpd ));
document.getElementById('content').appendChild(fileInfo);
}
});
});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
<p><b>These are 5 files from your GDrive :)</b></p>
<div id="content"></div>
In a nutshell, I want the following function to be executed when this button is clicked:
<input type="button" value="upload" onclick="generateUpload();" />
But it does not seem to be responding and I receive zero error from console.
Below is the generateUpload() function, and I know whats inside that function works because I have tried to load the pages with it and the google drive picker would run but I only want it to run upon button click.
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<script type="text/javascript">
function generateUpload()
{
// The Browser API key obtained from the Google Developers Console.
var developerKey = 'id';
// The Client ID obtained from the Google Developers Console.
var clientId = 'id';
// 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('auth', {'callback': onAuthApiLoad});
gapi.load('picker', {'callback': onPickerApiLoad});
}
function onAuthApiLoad() {
window.gapi.auth.authorize(
{
'client_id': clientId,
'scope': scope,
'immediate': true
},
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().
enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
addView(google.picker.ViewId.PDFS).
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 = 'The following(s) were stored in Parse: ' + url;
document.getElementById('result').innerHTML = message;
}
}
}
</script>
Below is the button found in the body:
<input type="button" value="Create Short" onclick="generateUpload();" /> <br/>
Update:
below is the entire code:
<!DOCTYPE html>
<html>
<head>
<script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>
<script src="angular.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--======================================================================-->
<!--Custom website css file is linked here-->
<link href="css/style1.css" rel="stylesheet">
<!--Font Awesome CSS link-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script>
Parse.initialize("ID", "ID");
var module = angular.module("AuthApp", []);
module.controller("MyCntrl", function($scope) {
$scope.currentUser = Parse.User.current();
$scope.userIdChanged = function () {
$scope.loading = true;
// now access $scope.userId here
var query = new Parse.Query(Parse.User);
query.get($scope.userId, {
success: function(userInfo) {
// The object was retrieved successfully.
var address = userInfo.get("Address");
$scope.address = 'address: ' + address;
var email = userInfo.get("Email");
$scope.email = 'Email: ' + email;
var phone = userInfo.get("Phone");
$scope.phone = 'Phone: ' + phone;
var scanURL = 'Scan';
$scope.scanURL = scanURL;
$scope.loading = false;
},
error: function(object, error) {
// The object was not retrieved successfully.
// error is a Parse.Error with an error code and message.
$scope.loading = false;
}
});
};
});
</script>
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<script type="text/javascript">
function generateUpload()
{
// The Browser API key obtained from the Google Developers Console.
var developerKey = 'ID';
// The Client ID obtained from the Google Developers Console.
var clientId = 'ID';
// 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('auth', {'callback': onAuthApiLoad});
gapi.load('picker', {'callback': onPickerApiLoad});
}
function onAuthApiLoad() {
window.gapi.auth.authorize(
{
'client_id': clientId,
'scope': scope,
'immediate': true
},
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().
enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
addView(google.picker.ViewId.PDFS).
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 = 'The following(s) were stored in Parse: ' + url;
document.getElementById('result').innerHTML = message;
}
}
addOnOnApiLoadedCallback(onApiLoad); // register API load
}
var gapi_loaded = false, gapi_buffered_callbacks = [];
function onApiLoad() { // this function gets called by the Google API
gapi_loaded = true;
// run buffered callbacks
for (var i = 0; i < gapi_buffered_callbacks.length; i += 1) {
gapi_buffered_callbacks();
}
}
function addOnOnApiLoadedCallback(callback) {
if (gapi_loaded) {
callback(); // api is loaded, call immediately
} else {
gapi_buffered_callbacks.push(callback); // add to callback list
}
}
</script>
</head>
<body ng-app="AuthApp">
<div>
<div class="row row-centered">
<div class="col-xs- col-centered col-fixed"><div class="item"><div class="content">
<div ng-controller="MyCntrl">
<div ng-show="currentUser">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div id="navbar" class="navbar-collapse collapse">
<h2> Admin Panel </h2>
</div></div></div></div>
<div id="content">
<h3> Upload a new user document </h3>
<h4><b> Step 1: <input type="text" class="form-control" ng-model="userId" ng-blur="userIdChanged()"/>
<div>{{email}}</div>
<br />
<input type="text" id="subjectP" placeholder="Subject line">
<textarea cols="50" rows="4" name="comment" id="notesP" placeholder="notes"></textarea>
<br />
<h4><b> Step 2</b></h4>
<input type="button" value="Create Short" onclick="generateUpload();" /> <br/> <br/>
<div id="result"></div>
</div></div></div></div>
</div>
</div>
</body>
</html>
I think I get it. You've set up the google API to call onApiLoad when it's finished loading. But that function doesn't exist in the global scope so you'll get an error.
The tricky part is that you want to run your code when you click your button and the google API has finished loading.
There are two ways to approach this:
1) Don't render the button until the Google API has finished loading. This involves rendering (or making visible) the button in you onApiLoad function.
That might not be feasible because of UI/UX stuff so there is a more complex solution:
2) Write a handler for the onApiLoad event:
var gapi_loaded = false, gapi_buffered_callbacks = [];
function onApiLoad() { // this function gets called by the Google API
gapi_loaded = true;
// run buffered callbacks
for (var i = 0; i < gapi_buffered_callbacks.length; i += 1) {
gapi_buffered_callbacks();
}
}
function addOnOnApiLoadedCallback(callback) {
if (gapi_loaded) {
callback(); // api is loaded, call immediately
} else {
gapi_buffered_callbacks.push(callback); // add to callback list
}
}
Then inside your generateUpload function add:
addOnOnApiLoadedCallback(onApiLoad);
Now as you can see this requires quite a bit of bookkeeping. Ideas have been developed to make this easier. Promises are one of them. If you want to explore more I suggest you start there.
Here is the full code:
function generateUpload()
{
// The Browser API key obtained from the Google Developers Console.
var developerKey = 'id';
// The Client ID obtained from the Google Developers Console.
var clientId = 'id';
// 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('auth', {'callback': onAuthApiLoad});
gapi.load('picker', {'callback': onPickerApiLoad});
}
function onAuthApiLoad() {
window.gapi.auth.authorize(
{
'client_id': clientId,
'scope': scope,
'immediate': true
},
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().
enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
addView(google.picker.ViewId.PDFS).
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 = 'The following(s) were stored in Parse: ' + url;
document.getElementById('result').innerHTML = message;
}
}
addOnOnApiLoadedCallback(onApiLoad); // register API load
}
var gapi_loaded = false, gapi_buffered_callbacks = [];
function onApiLoad() { // this function gets called by the Google API
gapi_loaded = true;
// run buffered callbacks
for (var i = 0; i < gapi_buffered_callbacks.length; i += 1) {
gapi_buffered_callbacks();
}
}
function addOnOnApiLoadedCallback(callback) {
if (gapi_loaded) {
callback(); // api is loaded, call immediately
} else {
gapi_buffered_callbacks.push(callback); // add to callback list
}
}
At first look its seems that you´re calling the function with a wrong name, you are calling it with gBenerateUpload and in the JQuery file it´s declared generateUpload
A slightly different approach to this would be to put all the functions/variables etc back in the global scope as designed, and instead remove the script tag pointing at the Google script. Instead, inject it in the click handler:
function generateUpload()
{
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://apis.google.com/js/api.js?onload=onApiLoad';
document.getElementsByTagName('head')[0].appendChild(script);
}