Google drive setting:-
1.) Open the link ---> https://developers.google.com/drive/?hl=en
2.) At the left hand side you will see a Quickstart menu , click on quickstart
3.) Click on JavaScript under QuickStart menu
4.) You will be directed to the link ---> https://developers.google.com/drive/quickstart-js
5.) Go to Step 1:and click on link ** Google APIs Console ** and you will be directed to the console page
6.) Click on the dropdown on the left hand side of the page name API Project
7.) Here you will see the option of create project .
8.) Click on create project and give any name in the project and save
9.) Select the Services tab in your API project, and enable the Drive API and Drive SDK.
10.) Select the API Access tab in your API project, and click Create an OAuth 2.0 client ID.
11.)In the Branding Information section, provide a name for your application (e.g. "Google Drive"), and click Next. Providing a product logo is optional.
12.) In the Client ID Settings section, do the following:
a.) Select Web application for the Application type.
b.) Click the more options link next to the heading, Your site or hostname.
c.) List your hostname in the Authorized Redirect URIs and JavaScript origins fields.
d.) In the first text field (hostname in the Authorized Redirect) enter --->https://example.com/networking/Service
e.) In the second text field JavaScript origins enter--->https://example.com
f.) Click Create Client ID.
g.) Note down the Client ID you will need it later
13.) In the API Access page, locate the section Client ID for Web applications and note the Client ID value.
14.) Now go to Drive SDK on the console page .
15.) Go to icons and provide a icon(Application icon)
16.) Go to Drive Integration section
17.) In the Open URL(Required)provide a URL EG:https://example.com/networking/Service
18.) Note down the App ID on the top of the page you will need it later
Integration with your web application :-
1)Code for google drive in jsp page.
2) Enter your generated client-id in code
3) Enter the App-Id in code
4) Enter the File-id in code
5)Now run your code.
Jsp code-
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Picker </title>
<!-- The standard Google Loader script. -->
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Use the Google Loader script to load the google.picker script.
google.setOnLoadCallback(createPicker);
google.load('picker', '1');
// Create and render a Picker object for searching images
// and uploading files.
var fileId;
var aa;
function createPicker() {
// Create a view to search images.
var view = new google.picker.View(google.picker.ViewId.DOCS);
view.setMimeTypes('image/png,image/jpeg,file/pdf');
// Use DocsUploadView to upload documents to Google Drive.
var uploadView = new google.picker.DocsUploadView();
var picker = new google.picker.PickerBuilder().
addView(view).
addView(uploadView).
setAppId(917725371450).
setCallback(pickerCallback).
build();
picker.setVisible(true);
}
// A simple callback implementation.
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
fileId = data.docs[0].id;
alert('The user selected: ' + fileId);
}
}
function getValue()
{
aa = window.fileId;
alert(aa); // yup, it's "test"
}
</script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<script type="text/javascript">
init = function() {
// aa = window.fileId;
// alert(aa);
s = new gapi.drive.share.ShareClient('917725371450');
s.setItemIds("0B-J5z2jag-KZSjhIeEFpQWdnQ2M");
}
window.onload = function() {
gapi.load('drive-share', init);
}
</script>
</head>
<body>
<button onclick="getValue()">Show</button>
<button onclick="s.showSettingsDialog()" >Share</button>
</body>
</html>
Output of created application -
when we run application window open as,
upload your document like images, pdf etc,
view your uploaded document
And now we can share document which we uploaded.
So we can use this with our any web application in which we want to provide google drive functionality and share our documents with others.
