· 8 years ago · Jan 04, 2017, 12:16 PM
1
2<!DOCTYPE html>
3<html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
6 <title>Google Picker Example</title>
7 <script type="text/javascript">
8 // The Browser API key obtained from the Google Developers Console.
9 var developerKey = 'API_KEY_HERE';
10 // The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
11 var clientId = 'OAUTH_CLIENT_ID_HERE'
12 // Scope to use to access user's photos.
13 var scope = ['https://www.googleapis.com/auth/photos', 'https://www.googleapis.com/auth/drive.file'];
14 var pickerApiLoaded = false;
15 var oauthToken;
16 // Use the API Loader script to load google.picker and gapi.auth.
17 function onApiLoad() {
18 gapi.load('auth', {'callback': onAuthApiLoad});
19 gapi.load('picker', {'callback': onPickerApiLoad});
20 }
21 function onAuthApiLoad() {
22 window.gapi.auth.authorize(
23 {
24 'client_id': clientId,
25 'scope': scope,
26 'immediate': false
27 },
28 handleAuthResult);
29 }
30 function onPickerApiLoad() {
31 pickerApiLoaded = true;
32 createPicker();
33 }
34 function handleAuthResult(authResult) {
35 if (authResult && !authResult.error) {
36 oauthToken = authResult.access_token;
37 createPicker();
38 }
39 }
40 // Create and render a Picker object for picking user Photos.
41 function createPicker() {
42 if (pickerApiLoaded && oauthToken) {
43 var picker = new google.picker.PickerBuilder().
44 addView(new google.picker.View(google.picker.ViewId.DOCS)).
45 setOAuthToken(oauthToken).
46 setDeveloperKey(developerKey).
47 setCallback(downloadImage).
48 build();
49 picker.setVisible(true);
50 }
51 }
52 function downloadImage(data) {
53 if (data.action == google.picker.Action.PICKED) {
54 var fileId = data.docs[0].id;
55
56 var webcontentlink = ' https://docs.google.com/uc?id='+fileId+'&export=download'
57 window.open( webcontentlink,'application/vnd.google-apps.spreadsheet');
58 }
59 }
60 </script>
61 </head>
62 <body>
63 <div id="result"></div>
64 <!-- The Google API Loader script. -->
65 <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
66 </body>
67</html>