Skip to content

Instantly share code, notes, and snippets.

@LindaLawton

LindaLawton/index.html

Last active March 19, 2021 09:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LindaLawton/371a9d0547c6dde45fe9c67aa4844746 to your computer and use it in GitHub Desktop.
Save LindaLawton/371a9d0547c6dde45fe9c67aa4844746 to your computer and use it in GitHub Desktop.
Download ZIP
Three JavaScript example for connecting to Google Drive api.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Drive v3</title>
<!-- Create a client id on Google developer console. Web credentials https://youtu.be/pBVAyU4pZOU -->
<meta name="google-signin-client_id" content="YOURCREDENTIALSHERE">
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/drive.metadata.readonly">
</head>
<body>
<h1>Hello Drive v3</h1>
<!-- The Sign-in button. This will run `queryListFiles()` on success. -->
<p class="g-signin2" data-onsuccess="queryListFiles"></p>
<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>
<script>
// Query the API and print the results to the page.
function queryListFiles() {
gapi.client.request({
path: '/drive/v3/files',
root: 'https://www.googleapis.com/',
method: 'GET',
params: {'fields': 'files (id,name)'}
}).then(displayResults, console.error.bind(console));
}
function displayResults(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
}
</script>
<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>
</body>
</html>
Raw
indexWithAsync.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Drive v3</title>
<!-- Create a client id on Google developer console. Web credentials https://youtu.be/pBVAyU4pZOU -->
<meta name="google-signin-client_id"
content="1015451674269-tnt7o6c8e2ef66teq83m62n8qdeinf1j.apps.googleusercontent.com">
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/drive.metadata.readonly">
</head>
<body>
<h1>Hello Drive v3</h1>
<!-- The Sign-in button. This will run `queryListFiles()` on success. -->
<p class="g-signin2" data-onsuccess="queryListFiles"></p>
<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>
<script>
// Query the API and print the results to the page.
async function queryListFiles() {
try {
await gapi.client.load('drive', 'v3')
const response = await gapi.client.drive.files.list({fields: 'files (id,name)'})
displayResults(response)
} catch (e) {
console.error('Error getting files', e)
}
}
function displayResults(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
}
</script>
<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>
</body>
</html>
Raw
indexWithLoad.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Drive v3</title>
<!-- Create a client id on Google developer console. Web credentials https://youtu.be/pBVAyU4pZOU -->
<meta name="google-signin-client_id"
content="YOURCREDENTIALSHERE">
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/drive.metadata.readonly">
</head>
<body>
<h1>Hello Drive v3</h1>
<!-- The Sign-in button. This will run `queryListFiles()` on success. -->
<p class="g-signin2" data-onsuccess="queryListFiles"></p>
<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>
<script>
// Query the API and print the results to the page.
function queryListFiles() {
gapi.client.load('drive','v3').then(function () {
gapi.client.drive.files.list({
fields: 'files (id,name)'
}).then(displayResults, console.error.bind(console))
})
}
function displayResults(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
}
</script>
<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>
</body>
</html>
@ErikHellman
Copy link

I would do this:

async function queryListFiles() {
    try {
        const response = await gapi.client.request({
            path: '/drive/v3/files',
            root: 'https://www.googleapis.com/',
            method: 'GET',
            params: {'fields': 'files (id,name)'}
        })
       displayResult(response)
    } catch(e) {
        console.error('Error getting files.', e)
    }
}

@ErikHellman
Copy link

First option with async/await:

async function queryListFiles() {
    try {
        await gapi.client.load('drive','v3')
        const response = await gapi.client.drive.files.list({fields: 'files (id,name)'})
        displayResults(response)
    } catch (e) {
        console.error('Error getting files', e)
    }
}

@filipbech
Copy link

I like Eriks last one.
And then I would define the displayResults function before using it. Even if js and hoisting let’s you do it this way, I think it adds cognitive load without any reason

@LindaLawton
Copy link
Author

Thank you both for your valuable code review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment