Skip to content

Instantly share code, notes, and snippets.

@aresnick
Last active October 22, 2021 12:58
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aresnick/d07f4de0bd7b5e03335b to your computer and use it in GitHub Desktop.
Save aresnick/d07f4de0bd7b5e03335b to your computer and use it in GitHub Desktop.
Google Drive Export Client Side Export Example
<html>
<head>
<script type="text/javascript">
// Your Client ID can be retrieved from your project in the Google
// Developer Console, https://console.developers.google.com
var CLIENT_ID = '436763072331-rod105o2ppkpjrcdpsmrvmn2st3qg9el.apps.googleusercontent.com';
var SCOPES = ['https://www.googleapis.com/auth/drive.readonly'];
/**
* Check if current user has authorized this application.
*/
function checkAuth() {
gapi.auth.authorize({
'client_id': CLIENT_ID,
'scope': SCOPES.join(' '),
'immediate': true
}, handleAuthResult);
}
/**
* Handle response from authorization server.
*
* @param {Object} authResult Authorization result.
*/
function handleAuthResult(authResult) {
var authorizeDiv = document.getElementById('authorize-div');
if (authResult && !authResult.error) {
// Hide auth UI, then load client library.
authorizeDiv.style.display = 'none';
loadDriveApi();
} else {
// Show auth UI, allowing the user to initiate authorization by
// clicking authorize button.
authorizeDiv.style.display = 'inline';
}
}
/**
* Initiate auth flow in response to user clicking authorize button.
*
* @param {Event} event Button click event.
*/
function handleAuthClick(event) {
gapi.auth.authorize({
client_id: CLIENT_ID,
scope: SCOPES,
immediate: false
},
handleAuthResult);
return false;
}
/**
* Load Drive API client library.
*/
function loadDriveApi() {
gapi.client.load('drive', 'v3', exportText);
}
var exportText = function() {
var fileID = '1S4MQ-Xb2Kyvn2cC8_nf4N_97xyxIXMeq8gZ16cImthU';
var request = gapi.client.drive.files.export({ // Read more about export at https://developers.google.com/drive/v3/reference/files/export#http-request
'fileId': fileID,
'mimeType': 'text/plain'
});
var fulfilledCallback = function(fulfilled) { // What to do when the request is fulfilled
console.log("Request fulfilled!", fulfilled);
appendPre(fulfilled.body); // Stick the response body into the page — fulfilled.body should be where the text is
};
var rejectedCallback = function(rejected) { // What to do when the request is rejected
console.log("Request rejected!", rejected);
};
// Make the request — For some reason using .execute instead of .then doesn't work; their API docs (https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiclientrequest) recommend using .then
request.then(fulfilledCallback, rejectedCallback)
};
/**
* Print files.
*/
function listFiles() {
var request = gapi.client.drive.files.list({
'pageSize': 100,
'fields': "nextPageToken, files(id, name)"
});
request.execute(function(resp) {
console.log(resp);
appendPre('Files:');
var files = resp.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.');
}
});
}
/**
* Append a pre element to the body containing the given message
* as its text node.
*
* @param {string} message Text to be placed in pre element.
*/
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/client.js?onload=checkAuth">
</script>
</head>
<body>
<div id="authorize-div" style="display: none">
<span>Authorize access to Drive API</span>
<!--Button for the user to click to initiate auth sequence -->
<button id="authorize-button" onclick="handleAuthClick(event)">
Authorize
</button>
</div>
<pre id="output"></pre>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment