├── LICENSE ├── test └── jquery-gdrive.html ├── README.md └── jquery-gdrive.js /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Tanmay Mohapatra 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /test/jquery-gdrive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | 13 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JQuery Plugin for Google Drive API 2 | 3 | Google Drive is a nice and easy (once you get used to it) way to store and share files on the cloud. Apps on Android phones and tablets synchronize their documents and images to Google Drive. One can think of so many interesting applications using them. 4 | 5 | Such applications often need to let the user choose files and folders from their Google Drive, read their contents and do something useful. This simple JQuery plugin provides APIs for some often used operations. 6 | 7 | ### Setting up jquery-gdrive 8 | - Download the file `jquery-gdrive.js` and include it in your HTML. 9 | - Include the following code snippet in your HTML (after modifying it appropriately of course): 10 | 11 | 12 | ```` 13 | 14 | 15 | 16 | 17 | 24 | ```` 25 | 26 | ### Authenticating to Google 27 | The plugin handles authentications and authorizations required from Google. The user is prompted for permissions on first use (in a session). The application can retrieve the authenticated user id and access token as below: 28 | 29 | ```` 30 | // returns the user id (e-mail) which is signed in. 31 | user_id = $().gdrive('user') 32 | 33 | // returns the authorization token 34 | auth_tok = $().gdrive('token') 35 | ```` 36 | 37 | If authentication is delegated to be done by `jquery-gdrive`, any additional authentication scopes required by the application can be provided through the `init` call using the `scope` option (similar to how `devkey` and `appid` are supplied). 38 | 39 | If authorization is done by the application instead, the results can be shared with jquery-gdrive through the `init` call using options authtok (for authorization token) and user (for authorized email id). 40 | 41 | 42 | ### Selecting Files and Folders 43 | 44 | jquery-plugin uses Google Drive `picker` API to display a file picker dialog. Selection made in the file picker can be populated in an HTML element or returned via a callback. 45 | 46 | Configure HTML elements that should hold selected Google Drive files using something similar to the snippet below. 47 | 48 | ```` 49 | // gdrive_file is the HTML elelemt that will hold the selection result 50 | $('#gdrive_file').gdrive('set', { 51 | 52 | // Trigger is the HTML element which on clicking should show the picker 53 | // (defaults to the same element that hosts the result) 54 | 'trigger': 'gdrive_file_selector', 55 | 56 | // Text to show as header of the picker dialog 57 | 'header': 'Select a file', 58 | 59 | // File/folder types to be shown and selected. 60 | // Use 'application/vnd.google-apps.folder' for folder. 61 | // Complete list here: https://developers.google.com/drive/web/mime-types 62 | // Defaults to showing all. 63 | 'filter': '' 64 | }); 65 | ```` 66 | 67 | The selected files are assigned an URL with a custom `gdrive` scheme with format `gdrive:///`. 68 | 69 | 70 | ### Try it 71 | 72 | Try the API with a sample implementation [here](http://tanmaykm.github.io/jquery-gdrive/jquery-gdrive.html). 73 | 74 | Or download the repository, run any simple static file web server, e.g. `python -m SimpleHTTPServer 8080` to start a simple web server, point your browser to [http://localhost:8080/](http://localhost:8080/test/jquery-gdrive.html) 75 | 76 | 77 | ### TODO 78 | - read/write/modify files 79 | - create folders 80 | - events 81 | -------------------------------------------------------------------------------- /jquery-gdrive.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | var result_target = ''; 3 | var picker = null; 4 | var gopts = { 5 | 'devkey': null, //api key 6 | 'appid': null, 7 | 'user': null, 8 | 'scope': 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/drive', 9 | 'authtok': null, 10 | 'init_stage': 0, 11 | 'width': 800, 12 | 'height': 400, 13 | 'callback': set_results, 14 | 'debug': false 15 | }; 16 | 17 | var dlgopts = {}; 18 | 19 | function do_auth(callback) { 20 | google_api_load(); 21 | if((gopts.authtok != null) && (gopts.user != null)) { 22 | if(callback) callback(); 23 | return; 24 | } 25 | if(gopts.debug) console.log("invoking autorization"); 26 | gapi.auth.authorize({ 27 | 'client_id': gopts.appid, 28 | 'scope': gopts.scope, 29 | 'immediate': false 30 | }, 31 | function(auth_result){ 32 | if (auth_result && !auth_result.error) { 33 | gopts.authtok = auth_result.access_token; 34 | get_user_id(callback); 35 | } 36 | else { 37 | console.log("Could not authenticate you with Google"); 38 | } 39 | }); 40 | }; 41 | 42 | function get_user_id(callback) { 43 | gapi.client.setApiKey(gopts.devkey); 44 | gapi.client.load('oauth2', 'v2', function(){ 45 | gapi.client.oauth2.userinfo.get().execute(function(resp) { 46 | gopts.user = resp.email; 47 | if(callback) callback(); 48 | }); 49 | }); 50 | }; 51 | 52 | function google_api_load() { 53 | if((gopts.init_stage & 3) == 3) return; 54 | if(!(gopts.init_stage & 1)) gapi.load('auth', {'callback': function(){ 55 | gopts.init_stage |= 1; 56 | }}); 57 | if(!(gopts.init_stage & 2)) gapi.load('picker', {'callback': function(){ 58 | gopts.init_stage |= 2; 59 | }}); 60 | }; 61 | 62 | function set_results(target_id, data) { 63 | if (data.action == google.picker.Action.PICKED) { 64 | var doc = data.docs[0]; 65 | var file_id = doc.id; 66 | var url = doc[google.picker.Document.URL]; 67 | var filename = doc[google.picker.Document.NAME]; 68 | var fullpath = "gdrive://" + filename + "/" + file_id; 69 | $('#'+target_id).val(fullpath); 70 | $('#'+target_id).change(); 71 | } 72 | }; 73 | 74 | function show_dlg(target_id) { 75 | $('#'+target_id).val(''); 76 | var elem_opts = dlgopts[target_id]; 77 | 78 | var view = new google.picker.DocsView(google.picker.ViewId.DOCS); 79 | view.setMode(google.picker.DocsViewMode.LIST); 80 | if(elem_opts.filter == 'application/vnd.google-apps.folder') { 81 | view.setSelectFolderEnabled(true); 82 | view.setMimeTypes('application/vnd.google-apps.folder'); 83 | } 84 | 85 | var picker_builder = new google.picker.PickerBuilder() 86 | .enableFeature(google.picker.Feature.NAV_HIDDEN) 87 | .disableFeature(google.picker.Feature.MULTISELECT_ENABLED) 88 | .setAppId(gopts.appid) 89 | .addView(view) 90 | //.addView(new google.picker.View(google.picker.ViewId.FOLDERS)) 91 | .setOAuthToken(gopts.authtok) 92 | .setDeveloperKey(gopts.devkey) 93 | .setCallback(function(data){ 94 | gopts.callback(target_id, data); 95 | }) 96 | .setSize(gopts.width, gopts.height) 97 | .setTitle(elem_opts.header); 98 | if(gopts.user != null) picker_builder.setAuthUser(gopts.user); 99 | picker = picker_builder.build(); 100 | picker.setVisible(true); 101 | return picker; 102 | }; 103 | 104 | $.fn.gdrive = function(action, options) { 105 | if(action === 'init') { 106 | gopts = $.extend(gopts, options); 107 | google_api_load(); 108 | return this; 109 | } 110 | if(action === 'set') { 111 | return this.each(function(){ 112 | var elemid = $(this).attr('id'); 113 | var elem_opts = $.extend($.extend(dlgopts[elemid], {'trigger': null, 'header': '', 'filter': ''}), options); 114 | dlgopts[elemid] = elem_opts; 115 | var trig_elem = (elem_opts.trigger == null) ? elemid : elem_opts.trigger; 116 | $('#'+trig_elem).click(function(){ 117 | do_auth(function() { 118 | picker = show_dlg(elemid); 119 | }); 120 | }); 121 | }); 122 | } 123 | if(action === 'show') { 124 | var elemid = this.attr('id'); 125 | do_auth(function() { 126 | picker = show_dlg(elemid); 127 | }); 128 | return this; 129 | } 130 | if(action === 'hide') { 131 | if(null != picker) { 132 | picker.setVisible(false); 133 | picker = null; 134 | } 135 | return this; 136 | } 137 | if(action == 'token') { 138 | return gopts.authtok; 139 | } 140 | if(action == 'user') { 141 | return gopts.user; 142 | } 143 | if(action == 'setauth') { 144 | var elem_opts = $.extend({'uid': null, 'token': null, 'callback': null}, options); 145 | var target_uid = elem_opts.uid; 146 | var target_tok = elem_opts.token; 147 | var callback = elem_opts.callback; 148 | do_auth(function() { 149 | if(null != target_uid) $('#'+target_uid).val(gopts.user); 150 | if(null != target_tok) $('#'+target_tok).val(gopts.authtok); 151 | if(null != callback) callback(); 152 | }); 153 | } 154 | if(action == 'debug') { 155 | return gopts; 156 | } 157 | }; 158 | 159 | }(jQuery)); 160 | --------------------------------------------------------------------------------