Overview

Google Drive JQuery plugin

This JQuery plugin helps to quickly connect and use Google Drive storage for any authenticated account.

Usage

GDrive plugin has authentication/authorization functions to any Google drive account. Once eastablished, the connection allows a javascript application to manage folder and files on the account.

Requirements

The plugin has no dependency but http://apis.google.com/js/client.js which is loadeded automaticaly by the plugin.

Setup

Include this markup in client page:


<html>
</head>
<script type="text/javascript" src="scripts/jquery.gdrive-1.0.0.js"></script>
</head>
<body>
<button id="apiDriveAuthenticate" type="submit">Start Google Drive Authentication</button>
<div id="gDriveAuthorization"></div>
</body>
</html>

The authentication process for accessing Google Drive is triggered by a client via a submit button. Note that presented ClientID and KeyAPi are dummy keys. Create you own account on console.developers.google.com and obtain yours ClientID and KeyAPi keys. To undestand and select the right authentication scope visit this link. This is reqiured javascript code to initialize the plugin:


//gdrive options with authentication and authorization level requested
var gdrive_pluginOptions = {
    authentication: {
        clientID: "209560473815-yourkey.apps.googleusercontent.com",
        keyAPI: "YOURAPIKEY"
    },
    scopes: ["https://www.googleapis.com/auth/drive", "https://www.googleapis.com/auth/drive.file","https://www.googleapis.com/auth/userinfo.email"]
}

//initialize gdrive
$(function () {
    //initialize
    $("#apiDriveAuthenticate").gDrive(gdrive_pluginOptions);
    //listen to the event
    $('body').bind('DrivePlugin_loaded',
   function (e, data) {
       
    	var auth = $.gDrive.authorized();
    	if (auth) {
        	$("#apiDriveAuthenticate").hide();
        	$("#gDriveAuthorization").css("color", "green");
        	$("#gDriveAuthorization").text("Authorized");
    	}
    	else {
        	$("#gDriveAuthorization").css("color", "orange");
        	$("#gDriveAuthorization").text("Not Authorized");
    	}

   });

});

API reference

This table presents public API for the plugin.

$.gDrive.folder.create

A function to create folder in parents folder IDs (array) parentIds with title and description. Set a flag uniqueTitle to create a folder only if a folder does not exist with the same name. 



$.gDrive.folder.create(title, parentIds, folderColorRgb, description, uniqueTitle, callback);

The callback parameter is required to set synchronous operations to process returned value after the call completion.



$.gDrive.folder.create(title, parentIds, folderColorRgb, description, uniqueTitle, function(result) { 
	$.each(result,function(index,value){ alert(value.id+"-"+value.title+"-"+value.createdDate)});
 });

$.gDrive.folder.getChildren

A function to get list of folders in parent folder ID folderId. 



$.gDrive.folder.getChildren(folderId, callback);

The callback parameter is required to set synchronous operations to process returned value after the call completion.



$.gDrive.folder.getListFolders(folderId, function(result) { 
	$.each(result,function(index,value){ alert(value.id+"-"+value.title+"-"+value.createdDate)});
 });

$.gDrive.folder.getByTitle

A function to find folder by folder name title. Set includeTrashed parameter as true, false or null for only trashed.



$.gDrive.folder.getByTitle(title, includeTrashed, callback);

The callback parameter is required to set synchronous operations to process returned value after the call completion. Array of folder ids with the same title is returned.



$.gDrive.folder.getByTitle(title, includeTrashed, function(result) { 
	$.each(result,function(index,value){ alert(value.id) });
 });

$.gDrive.folder.remove

A function to remove folder with id. 



$.gDrive.folder.remove(id, callback);

The callback parameter is required to set synchronous operations to process returned value after the call completion. True or false is returned.



$.gDrive.folder.remove(id, function(result) { 
	alert(result)  );
 });

$.gDrive.file.get

A function to get list of files in parent folder ID folderId. Set includeTrashed parameter as true, false or null for only trashed. 



$.gDrive.file.get(folderId, includeTrashed, callback);

The callback parameter is required to set synchronous operations to process returned value after the call completion.



$.gDrive.file.get(folderId, includeTrashed, function(result) { 
	$.each(result,function(index,value){ alert(value.id+"-"+value.title+"-"+value.createdDate)});
 });

$.gDrive.file.existInFolder

A function to get information if file fileId exists in folder ID folderId. 



$.gDrive.file.existInFolder(folderId, fileId, callback);

The callback parameter is required to set synchronous operations to process returned value after the call completion.



$.gDrive.file.existInFolder(folderId, fileId, function(result) { 
	$.each(result,function(index,value){ alert(value==true)});
 });

$.gDrive.file.removeFromFolder

A function to remove file fileId from folder ID folderId. 



$.gDrive.file.getListFiles(folderId, fileId, callback);

The callback parameter is required to set synchronous operations to process returned value after the call completion.



$.gDrive.file.removeFromFolder(folderId, fileId, function(result) { 
	$.each(result,function(index,value){ alert(value==true)});
 });

$.gDrive.file.trash

A function to trash file fileId. 



$.gDrive.file.trash(fileId, callback);

The callback parameter is required to set synchronous operations to process returned value after the call completion.



$.gDrive.file.trash(folderId, fileId, function(result) { 
	$.each(result,function(index,value){ alert(value==true)});
 });

$.gDrive.file.remove

A function to remove file fileId. 



$.gDrive.file.remove(fileId, callback);

The callback parameter is required to set synchronous operations to process returned value after the call completion.



$.gDrive.file.remove(folderId, fileId, function(result) { 
	$.each(result,function(index,value){ alert(value==true)});
 });

$.gDrive.file.upload

A function to upload file fileData from browser upload function with description to parent folder folderID . 



$.gDrive.file.upload(fileData, folderID, description, callback);

The callback parameter is required to set synchronous operations to process returned value after the call completion.



$.gDrive.file.upload(fileData, folderID, description, function(file) { 
	$.each(result,function(index,value){ alert(value.id+"-"+value.title+"-"+value.createdDate) });
 });

$.gDrive.file.uploadStringAsFile

A function to upload file serialized as string fileContent to parent folder folderID with mimeType and description. 



$.gDrive.file.uploadStringAsFile(fileContent, folderID, fileName, mimeType, description, callback);

The callback parameter is required to set synchronous operations to process returned value after the call completion.



$.gDrive.file.uploadStringAsFile(fileContent, folderID, fileName, mimeType, description, function(result) { 
	$.each(result,function(index,value){ alert(value.id+"-"+value.title+"-"+value.createdDate) });
 });

$.gDrive.file.getContent

A function to get file fileId content. 



$.gDrive.file.getContent(fileId, callback);

The callback parameter is required to set synchronous operations to process returned value after the call completion.



$.gDrive.file.getContent(fileId, function(result) { 
	$.each(result,function(index,value){ alert(value.toString()) });
 });

$.gDrive.file.downloadAction

A function to get file fileId url link for download. 



$.gDrive.file.downloadAction(fileId, callback);

The callback parameter is required to set synchronous operations to process returned value after the call completion.



$.gDrive.file.downloadAction(fileId, function(result) { 
	$.each(result,function(index,value){ alert(value.toString()) });
 });

$.gDrive.revokeAuthorization

A function to revoke authorization. 


$.gDrive.revokeAuthorization();

The callback parameter is required to set synchronous operations to process returned value after the call completion.


$.gDrive.revokeAuthorization( function(result) { 
	 alert(result.toString());
 });

Events

DrivePlugin_loaded event is fired after the plugin is loaded.


  
    $('body').bind('DrivePlugin_loaded',
       function (e, data) {
       
            //is it authorized?
    	    var auth = $.gDrive.authorized();

       });

Properties

These are public properties (read-only) for the plugin.

  • $.gDrive.authorized() Gets information if plugin is authorized.
  • $.gDrive.isPluginLoaded() Gets information if plugin is loaded.
  • $.gDrive.isClientAPILoaded() Gets information if client API is loaded.
  • $.gDrive.userEmail() Gets user email account used for authenticated account.
  • $.gDrive.userEmailPicture() Gets user account picture for authenticated account.

Demo

GDrive plugin is implemented for a map aplication to manage attached maps and other documents from user's Google Drive.

Download

Version 1.2.0 - Nov 2, 2015

  • NEW Added qunit tests project.
Download plugin minimized source

Version 1.1.0 - Oct 15, 2015

  • NEW Revoking Google account authentication feature.
  • FIXED Issue with updating file.
  • UPDATED Uploading string content.

Version 1.0.0 - Sep 2, 2015

  • DEFAULT First version.

Your Support

For additional plugin customization, you can get uncompressed code with qunit tests solution for a minimal cost of $20CAD.

Contact us

If have questions, write us an email to plugins@anasoft.net.

Thank you.