Skip to content

Instantly share code, notes, and snippets.

@csusbdt
Created January 13, 2013 16:56
Show Gist options
  • Save csusbdt/4525042 to your computer and use it in GitHub Desktop.
Save csusbdt/4525042 to your computer and use it in GitHub Desktop.
How to store JSON data into the user's Google drive storage.
<html>
<head>
<!--
In this example, I started with the 5-minute example provided by Google
on the following page:
https://developers.google.com/drive/
I modified the example code, so that I could write the following
Javascript object as a json string into a file called
csusbdt-drive-example-app-state.txt.
var appState = {
number: 12,
text: 'hello'
};
-->
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<script type="text/javascript">
var CLIENT_ID = '427813993638.apps.googleusercontent.com';
var SCOPES = 'https://www.googleapis.com/auth/drive';
/**
* Called when the client library is loaded to start the auth flow.
*/
function handleClientLoad() {
window.setTimeout(checkAuth, 1);
}
/**
* Check if the current user has authorized the application.
*/
function checkAuth() {
gapi.auth.authorize(
{'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': true},
handleAuthResult);
}
/**
* Called when authorization server replies.
*
* @param {Object} authResult Authorization result.
*/
function handleAuthResult(authResult) {
var authButton = document.getElementById('authorizeButton');
var doitButton = document.getElementById('doitButton');
authButton.style.display = 'none';
doitButton.style.display = 'none';
if (authResult && !authResult.error) {
// Access token has been successfully retrieved, requests can be sent to the API.
doitButton.style.display = 'block';
doitButton.onclick = uploadFile;
} else {
// No access token could be retrieved, show the button to start the authorization flow.
authButton.style.display = 'block';
authButton.onclick = function() {
gapi.auth.authorize(
{'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': false},
handleAuthResult);
};
}
}
/**
* Start the file upload.
*
* @param {Object} evt Arguments from the file selector.
*/
function uploadFile(evt) {
gapi.client.load('drive', 'v2', function() {
insertFile();
});
}
/**
* Insert new file.
*/
function insertFile() {
const boundary = '-------314159265358979323846264';
const delimiter = "\r\n--" + boundary + "\r\n";
const close_delim = "\r\n--" + boundary + "--";
var appState = {
number: 12,
text: 'hello'
};
var fileName = 'csusbdt-drive-example-app-state.txt';
var contentType = 'application/json';
var metadata = {
'title': fileName,
'mimeType': contentType
};
var base64Data = btoa(JSON.stringify(appState));
var multipartRequestBody =
delimiter +
'Content-Type: application/json\r\n\r\n' +
JSON.stringify(metadata) +
delimiter +
'Content-Type: ' + contentType + '\r\n' +
'Content-Transfer-Encoding: base64\r\n' +
'\r\n' +
base64Data +
close_delim;
var request = gapi.client.request({
'path': '/upload/drive/v2/files',
'method': 'POST',
'params': {'uploadType': 'multipart'},
'headers': {
'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
},
'body': multipartRequestBody});
request.execute(function(arg) {
console.log(arg);
});
}
</script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
</head>
<body>
<input type="button" id="doitButton" style="display: none" value="Do it" onclick="alert('hiiii')" /> <br>
<input type="button" id="authorizeButton" style="display: none" value="Authorize" />
</body>
</html>
@HaxxonHax
Copy link

Thank you for this! I was able to get my JSON data to save to my Google drive, but when I open it in Drive Notepad, it looks like trash data. How do I pull it back down into JSON data?

@error404as
Copy link

To retrieve saved data you may use example from https://developers.google.com/drive/v2/reference/files/get
"file" passed to "downloadFile" is what you receive in "request.execute()". But, of course, you need to save somewhere the saved file ID.

@iliasnaamane
Copy link

iliasnaamane commented Aug 6, 2016

Hello please , everything is ok , I can found the uploaded files into the uploader drive , but I can't found data centralized into one drive ? .

@ysairam17
Copy link

i am unable to upload file please give me code to store in google drive using java or java script

@JABBERWOCK1
Copy link

I am trying to do the "wallpaperboard" app using Google Drive, that shouldn't need any extra config though should it?

@alexmoleiro
Copy link

The insertFile() worked perfectly to me.
I wonder how to send images either png or jpg.

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