Last active
March 19, 2021 09:45
-
-
Save LindaLawton/371a9d0547c6dde45fe9c67aa4844746 to your computer and use it in GitHub Desktop.
Three JavaScript example for connecting to Google Drive api.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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
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