Daniel15 · November 7, 2024 19:51 · sbimochan · Jun 14, 2020 · Daniel15 · Jun 22, 2020
diff --git a/1_README.md b/1_README.md
diff --git a/filepicker.htm b/filepicker.htm
 <!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
 /**!
 * 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);
 		}
 	};
 }());
	<!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>
	/**!
	* 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);
	}
	};
	}());