Skip to content

Instantly share code, notes, and snippets.

@LindaLawton

LindaLawton/index.html

Last active March 19, 2021 09:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save LindaLawton/371a9d0547c6dde45fe9c67aa4844746 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
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
Copy Markdown

ErikHellman commented Mar 17, 2021

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
Copy Markdown

ErikHellman commented Mar 17, 2021

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
Copy Markdown

filipbech commented Mar 17, 2021

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
Copy Markdown
Author

LindaLawton commented Mar 18, 2021

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