Google Picker
Provides the way to upload/Download the Gdrive files directly from our web application.
In order to integrate the Google picker to the web application , we need to create an project in Google and then we can integrate in to the application
To Create Project on Google:
1. Create project from developer console from the link Google Console
2. Click API&Auth and APIs link in left side, and ON the Google Picker api
3. Click the credentials like you will get an pop up window where you need to enter the your application url.
4. Then click create new client id button later create new key button. You will get the necessary keys and tokens for your application.
To integrate GooglePicker in to application:
Include the below script to the view file, where you want to place the GooglePicker
<script>
var developerKey = “DEVELOPER KEY”
var clientid = “CLIENT ID”
var scope = [“https://www.googleapis.com/auth/photos”%5D //Applciation access to user Gdrive, here I have enabled the access to view the user photos, you can get more about scopes here https://developers.google.com/picker/docs/index
var oauthToken;
// First we need to load the authentication and Use the API Loader script to load google.picker and gapi.auth.
function onApiLoad() {
gapi.load(‘auth’, {‘callback’: onAuthApiLoad}); // To load google authentication API
gapi.load(‘picker’); // To load google picker API
// Callback function will be called once the loader is ready , in above example onAuthApiLoad function will be called once the “auth” api library is don loading, similarly for picker api
}
// Function to authenticate the user for his Gdrive
function onAuthApiLoad() {
window.gapi.auth.authorize(
{ ‘client_id’: clientid, ‘scope’: scope },handleAuthResult);
// handleAuthResult => callback function to be called after the onAuthAPILoad function completes , in other words function needs be called after user authentication
}
var oauthToken;
// Function called after onAuthApiLoad, to handle authoriaztion
function handleAuthResult(authResult) {
// If user clicks Accept button, save the accesstoken for that user to oauthToken
if (authResult && !authResult.error) {
oauthToken = authResult.access_token;
// Function to create picker view on our application
createPicker();
}
}
// Function called after onAuthApiLoad, to handle authoriaztion
function handleAuthResult(authResult) {
// If user clicks Accept button, save the accesstoken for that user to oauthToken
if (authResult && !authResult.error) {
oauthToken = authResult.access_token;
// Function to create picker view on our application
createPicker();}
}
// Create and render a Picker object for picking user Photos.
function createPicker() {
var picker = new google.picker.PickerBuilder().
addView(new google.picker.DocsUploadView()).
addView(google.picker.ViewId.PHOTO_ALBUMS).
addView(new google.picker.DocsView()).
setOAuthToken(oauthToken).
setDeveloperKey(developerKey).
setCallback(pickerCallback).
build();
picker.setVisible(true);
}
// A simple callback implementation.
function pickerCallback(data) {
var url = ‘nothing’;
// Make sure user clicked select button
// data object holds the selected file details
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
var doc = data[google.picker.Response.DOCUMENTS][0];
url = doc[google.picker.Document.URL];
}
var message = ‘You picked: ‘ + url;
// Write the selected file URL to the Div
document.getElementById(‘result’).innerHTML = message;
}
</script>
<script type=”text/javascript” src=”https://apis.google.com/js/api.js?onload=onApiLoad”></script>
<div id=”result”></div>
You can get the source code here, you can check more about Google picker api here
railsfornovice 