fernandovega · June 26, 2018 03:16 · Jun 26, 2018 · Sep 11, 2014 · Jul 14, 2013 · Jul 14, 2013
diff --git a/1_README.md → README_GDP.md b/1_README.md → README_GDP.md
diff --git a/1_README.md b/1_README.md
@@ -15,7 +15,7 @@ Usage
    for instructions).
 2. Replace `PUT_YOUR_API_KEY_HERE` with your API key (listed under "Key for browser apps" in 
    Google's API console)
-3. Replace `PUT_YOUR_NUMERIC_CLIENT_ID_HERE` with the numeric portion of your OAuth2 client ID 
+3. Replace `PUT_YOUR_CLIENT_ID_HERE` with your OAuth2 client ID 
    (xxxxxxxxxx.apps.googleusercontent.com)
 4. Test out the code to ensure it works
 5. Replcae the onSelect method with your own code
@@ -30,6 +30,7 @@ Licence
 =======
 (The MIT licence)
 
+Copyright (C) 2014 Yaroslav Lapin (JLarky)
 Copyright (C) 2013 Daniel Lo Nigro (Daniel15)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of

diff --git a/filepicker.htm b/filepicker.htm
@@ -6,23 +6,24 @@
 </head>
 <body>
 	<button type="button" id="pick">Pick File</button>
-
-	<script src="filepicker.js"></script>
+	<pre id="fileInfo"></pre>
+
+	<script src="filepicker4.js"></script>
 	<script>
 		function initPicker() {
 			var picker = new FilePicker({
 				apiKey: 'PUT_YOUR_API_KEY_HERE',
-				clientId: PUT_YOUR_NUMERIC_CLIENT_ID_HERE,
+				clientId: 'PUT_YOUR_CLIENT_ID_HERE',
 				buttonEl: document.getElementById('pick'),
 				onSelect: function(file) {
 					console.log(file);
-					alert('Selected ' + file.title);
+					document.getElementById('fileInfo').innerHTML = file.title + '\n' + file.alternateLink;
 				}
-			});	
+			});
 		}
 	</script>
-	
+
 	<script src="https://www.google.com/jsapi?key=PUT_YOUR_API_KEY_HERE"></script>
 	<script src="https://apis.google.com/js/client.js?onload=initPicker"></script>
 </body>
-</html>
+</html>
diff --git a/filepicker.js b/filepicker.js
@@ -10,14 +10,14 @@
 		// Config
 		this.apiKey = options.apiKey;
 		this.clientId = options.clientId;
-		
+
 		// Elements
 		this.buttonEl = options.buttonEl;
-		
+
 		// Events
 		this.onSelect = options.onSelect;
-		this.buttonEl.addEventListener('click', this.open.bind(this));		
-	
+		this.buttonEl.addEventListener('click', this.open.bind(this));
+
 		// Disable the button until the API loads, as it won't work properly until then.
 		this.buttonEl.disabled = true;
 
@@ -31,7 +31,7 @@
 		/**
 		 * Open the file picker.
 		 */
-		open: function() {		
+		open: function() {
 			// Check if the user has already authenticated
 			var token = gapi.auth.getToken();
 			if (token) {
@@ -42,22 +42,27 @@
 				this._doAuth(false, function() { this._showPicker(); }.bind(this));
 			}
 		},
-		
+
 		/**
 		 * Show the file picker once authentication has been done.
 		 * @private
 		 */
 		_showPicker: function() {
 			var accessToken = gapi.auth.getToken().access_token;
-			this.picker = new google.picker.PickerBuilder().
-				addView(google.picker.ViewId.DOCUMENTS).
-				setAppId(this.clientId).
-				setOAuthToken(accessToken).
-				setCallback(this._pickerCallback.bind(this)).
-				build().
-				setVisible(true);
+			var view = new google.picker.DocsView();
+			view.setIncludeFolders(true);
+			this.picker = new google.picker.PickerBuilder()
+				.enableFeature(google.picker.Feature.NAV_HIDDEN)
+				.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
+				.setAppId(this.clientId)
+				.setDeveloperKey(this.apiKey)
+				.setOAuthToken(accessToken)
+				.addView(view)
+				.setCallback(this._pickerCallback.bind(this))
+				.build()
+				.setVisible(true);
 		},
-		
+
 		/**
 		 * Called when a file has been selected in the Google Drive file picker.
 		 * @private
@@ -69,7 +74,7 @@
 					request = gapi.client.drive.files.get({
 						fileId: id
 					});
-					
+
 				request.execute(this._fileGetCallback.bind(this));
 			}
 		},
@@ -82,33 +87,33 @@
 				this.onSelect(file);
 			}
 		},
-		
+
 		/**
 		 * Called when the Google Drive file picker API has finished loading.
 		 * @private
 		 */
 		_pickerApiLoaded: function() {
 			this.buttonEl.disabled = false;
 		},
-		
+
 		/**
 		 * Called when the Google Drive API has finished loading.
 		 * @private
 		 */
 		_driveApiLoaded: function() {
 			this._doAuth(true);
 		},
-		
+
 		/**
 		 * Authenticate with Google Drive via the Google JavaScript API.
 		 * @private
 		 */
-		_doAuth: function(immediate, callback) {	
+		_doAuth: function(immediate, callback) {
 			gapi.auth.authorize({
-				client_id: this.clientId + '.apps.googleusercontent.com',
+				client_id: this.clientId,
 				scope: 'https://www.googleapis.com/auth/drive.readonly',
 				immediate: immediate
 			}, callback);
 		}
 	};
-}());
+}());
diff --git a/1_README.md b/1_README.md
@@ -7,6 +7,8 @@ good examples for using these two APIs separately, but no documentation on using
 Note that this is just sample code, designed to be concise to demonstrate the API. In a production 
 environment, you should include more error handling.
 
+See a demo at http://stuff.dan.cx/js/filepicker/google/
+
 Usage
 =====
 1. Get a Google Drive API key (refer to [Google's Quickstart guide](https://developers.google.com/drive/quickstart-js#step_1_enable_the_drive_api)

diff --git a/1_README.md b/1_README.md
@@ -0,0 +1,49 @@
+Google Drive File Picker Example
+================================
+This is an example of how to use the Google Drive file picker and Google Drive API to retrieve 
+files from Google Drive using pure JavaScript. At the time of writing (14th July 2013), Google have 
+good examples for using these two APIs separately, but no documentation on using them together.
+
+Note that this is just sample code, designed to be concise to demonstrate the API. In a production 
+environment, you should include more error handling.
+
+Usage
+=====
+1. Get a Google Drive API key (refer to [Google's Quickstart guide](https://developers.google.com/drive/quickstart-js#step_1_enable_the_drive_api)
+   for instructions).
+2. Replace `PUT_YOUR_API_KEY_HERE` with your API key (listed under "Key for browser apps" in 
+   Google's API console)
+3. Replace `PUT_YOUR_NUMERIC_CLIENT_ID_HERE` with the numeric portion of your OAuth2 client ID 
+   (xxxxxxxxxx.apps.googleusercontent.com)
+4. Test out the code to ensure it works
+5. Replcae the onSelect method with your own code
+
+References
+==========
+ - [Google Picker API Developer's Guide](https://developers.google.com/picker/docs/)
+ - [Google Drive SDK - API Reference](https://developers.google.com/drive/v2/reference/)
+ - [JavaScript Client Library Reference](https://developers.google.com/api-client-library/javascript/reference/referencedocs)
+
+Licence
+=======
+(The MIT licence)
+
+Copyright (C) 2013 Daniel Lo Nigro (Daniel15)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/filepicker.htm b/filepicker.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<title>Google Drive File Picker Example</title>
+</head>
+<body>
+	<button type="button" id="pick">Pick File</button>
+
+	<script src="filepicker.js"></script>
+	<script>
+		function initPicker() {
+			var picker = new FilePicker({
+				apiKey: 'PUT_YOUR_API_KEY_HERE',
+				clientId: PUT_YOUR_NUMERIC_CLIENT_ID_HERE,
+				buttonEl: document.getElementById('pick'),
+				onSelect: function(file) {
+					console.log(file);
+					alert('Selected ' + file.title);
+				}
+			});	
+		}
+	</script>
+
+	<script src="https://www.google.com/jsapi?key=PUT_YOUR_API_KEY_HERE"></script>
+	<script src="https://apis.google.com/js/client.js?onload=initPicker"></script>
+</body>
+</html>
diff --git a/filepicker.js b/filepicker.js
@@ -0,0 +1,114 @@
+/**!
+ * Google Drive File Picker Example
+ * By Daniel Lo Nigro (http://dan.cx/)
+ */
+(function() {
+	/**
+	 * Initialise a Google Driver file picker
+	 */
+	var FilePicker = window.FilePicker = function(options) {
+		// Config
+		this.apiKey = options.apiKey;
+		this.clientId = options.clientId;
+
+		// Elements
+		this.buttonEl = options.buttonEl;
+
+		// Events
+		this.onSelect = options.onSelect;
+		this.buttonEl.addEventListener('click', this.open.bind(this));		
+
+		// Disable the button until the API loads, as it won't work properly until then.
+		this.buttonEl.disabled = true;
+
+		// Load the drive API
+		gapi.client.setApiKey(this.apiKey);
+		gapi.client.load('drive', 'v2', this._driveApiLoaded.bind(this));
+		google.load('picker', '1', { callback: this._pickerApiLoaded.bind(this) });
+	}
+
+	FilePicker.prototype = {
+		/**
+		 * Open the file picker.
+		 */
+		open: function() {		
+			// Check if the user has already authenticated
+			var token = gapi.auth.getToken();
+			if (token) {
+				this._showPicker();
+			} else {
+				// The user has not yet authenticated with Google
+				// We need to do the authentication before displaying the Drive picker.
+				this._doAuth(false, function() { this._showPicker(); }.bind(this));
+			}
+		},
+
+		/**
+		 * Show the file picker once authentication has been done.
+		 * @private
+		 */
+		_showPicker: function() {
+			var accessToken = gapi.auth.getToken().access_token;
+			this.picker = new google.picker.PickerBuilder().
+				addView(google.picker.ViewId.DOCUMENTS).
+				setAppId(this.clientId).
+				setOAuthToken(accessToken).
+				setCallback(this._pickerCallback.bind(this)).
+				build().
+				setVisible(true);
+		},
+
+		/**
+		 * Called when a file has been selected in the Google Drive file picker.
+		 * @private
+		 */
+		_pickerCallback: function(data) {
+			if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
+				var file = data[google.picker.Response.DOCUMENTS][0],
+					id = file[google.picker.Document.ID],
+					request = gapi.client.drive.files.get({
+						fileId: id
+					});
+
+				request.execute(this._fileGetCallback.bind(this));
+			}
+		},
+		/**
+		 * Called when file details have been retrieved from Google Drive.
+		 * @private
+		 */
+		_fileGetCallback: function(file) {
+			if (this.onSelect) {
+				this.onSelect(file);
+			}
+		},
+
+		/**
+		 * Called when the Google Drive file picker API has finished loading.
+		 * @private
+		 */
+		_pickerApiLoaded: function() {
+			this.buttonEl.disabled = false;
+		},
+
+		/**
+		 * Called when the Google Drive API has finished loading.
+		 * @private
+		 */
+		_driveApiLoaded: function() {
+			this._doAuth(true);
+		},
+
+		/**
+		 * Authenticate with Google Drive via the Google JavaScript API.
+		 * @private
+		 */
+		_doAuth: function(immediate, callback) {	
+			gapi.auth.authorize({
+				client_id: this.clientId + '.apps.googleusercontent.com',
+				scope: 'https://www.googleapis.com/auth/drive.readonly',
+				immediate: immediate
+			}, callback);
+		}
+	};
+}());