Google drive picker demo

File pick from Google Drive.

Demo LInk: http://www.weanswer.xyz/demo/googleDrive/

Follow the steps

Download Code
How to download the file from google drive selected
Create account https://console.developers.google.com/
Create project
Library->Search google drive and enable API
Library->Search google picker and enable API
Create a credential for developerKey ->API Key -> Browser key and Get API key
Create credential clientId->Oauthclient->Web application->Get clientId
if your demo from localhost then Authorised JavaScript origins = “http://localhost” and Authorized redirect URIs =”http://localhost/googleDrive/”

Above API Key and Client id replace in below code



<!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 Example</title>
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

        <script type="text/javascript">

            // The Browser API key obtained from the Google Developers Console.
            var developerKey = 'AIzaSyB7yfM3nXnT5_7s5X2XvO5Ef790ibbkqC1';

            // The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
            var clientId = "1052577024753-tj3c1k40d6crnqcf6le89kbcm2j7b414.apps.googleusercontent.com";

            // Scope to use to access user's photos.
            var scope = ['https://www.googleapis.com/auth/drive.file'];

            var pickerApiLoaded = false;
            var oauthToken;

            // Use the API Loader script to load google.picker and gapi.auth.
            function onApiLoad() {
                gapi.load('auth', {'callback': onAuthApiLoad});
                gapi.load('picker', {'callback': onPickerApiLoad});
            }

            function onAuthApiLoad() {
                window.gapi.auth.authorize(
                        {
                            'client_id': clientId,
                            'scope': scope,
                            'immediate': false
                        },
                handleAuthResult);
            }

            function onPickerApiLoad() {
                pickerApiLoaded = true;
                createPicker();
            }

            function handleAuthResult(authResult) {
                if (authResult && !authResult.error) {
                    oauthToken = authResult.access_token;
                    createPicker();
                }
            }

            // Create and render a Picker object for picking user Photos.
            function createPicker() {
                if (pickerApiLoaded && oauthToken) {
                    var picker = new google.picker.PickerBuilder().
                            addViewGroup(
                                    new google.picker.ViewGroup(google.picker.ViewId.DOCS).
                                    addView(google.picker.ViewId.DOCUMENTS).
                                    addView(google.picker.ViewId.PRESENTATIONS)).
                            setOAuthToken(oauthToken).
                            setDeveloperKey(developerKey).
                            setCallback(pickerCallback).
                            build();
                    picker.setVisible(true);
                }
            }

            // A simple callback implementation.
            function pickerCallback(data) {
                var url = 'nothing';
                var name = 'nothing';
                if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
                    var doc = data[google.picker.Response.DOCUMENTS][0];
                    url = doc[google.picker.Document.URL];
                    name = doc.name;
                    var param = {'fileId': doc.id, 'oAuthToken': oauthToken, 'name': name}
                    console.log(param);
                    document.getElementById('result').innerHTML = "Downloading...";
                    $.post('download.php', param,
                            function (returnedData) {
                                document.getElementById('result').innerHTML = "Download completed";
                            });


//                    var val = name.toLowerCase();
//                    var regex = new RegExp("(.*?)\.(js|js)$");
//                    if (!(regex.test(val))) {
//                        alert('Please select correct file format');
//                    }
                }
//                var message = 'You picked: ' + url;
//                document.getElementById('result').innerHTML = message;
            }
        </script>
    </head>
    <body>

        <button onclick="onApiLoad()">Pick From Google Drive</button>
        <div id="result"></div>

        <!-- The Google API Loader script. -->
        <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
    </body>
</html>

100

101

102

103

104

105

106

107

<!DOCTYPE html>

<head>

<title>Google Picker Example</title>

// The Browser API key obtained from the Google Developers Console.

var developerKey = 'AIzaSyB7yfM3nXnT5_7s5X2XvO5Ef790ibbkqC1';

// The Client ID obtained from the Google Developers Console. Replace with your own Client ID.

var clientId = "1052577024753-tj3c1k40d6crnqcf6le89kbcm2j7b414.apps.googleusercontent.com";

// Scope to use to access user's photos.

var scope = ['https://www.googleapis.com/auth/drive.file'];

var pickerApiLoaded = false;

var oauthToken;

// Use the API Loader script to load google.picker and gapi.auth.

function onApiLoad() {

gapi.load('auth', {'callback': onAuthApiLoad});

gapi.load('picker', {'callback': onPickerApiLoad});

}

function onAuthApiLoad() {

window.gapi.auth.authorize(

{

'client_id': clientId,

'scope': scope,

'immediate': false

handleAuthResult);

}

function onPickerApiLoad() {

pickerApiLoaded = true;

createPicker();

}

function handleAuthResult(authResult) {

if (authResult && !authResult.error) {

oauthToken = authResult.access_token;

createPicker();

}

// Create and render a Picker object for picking user Photos.

function createPicker() {

if (pickerApiLoaded && oauthToken) {

var picker = new google.picker.PickerBuilder().

addViewGroup(

new google.picker.ViewGroup(google.picker.ViewId.DOCS).

addView(google.picker.ViewId.DOCUMENTS).

addView(google.picker.ViewId.PRESENTATIONS)).

setOAuthToken(oauthToken).

setDeveloperKey(developerKey).

setCallback(pickerCallback).

build();

picker.setVisible(true);

}

// A simple callback implementation.

function pickerCallback(data) {

var url = 'nothing';

var name = 'nothing';

if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {

var doc = data[google.picker.Response.DOCUMENTS][0];

url = doc[google.picker.Document.URL];

name = doc.name;

var param = {'fileId': doc.id, 'oAuthToken': oauthToken, 'name': name}

console.log(param);

document.getElementById('result').innerHTML = "Downloading...";

$.post('download.php', param,

function (returnedData) {

document.getElementById('result').innerHTML = "Download completed";

});

// var val = name.toLowerCase();

// var regex = new RegExp("(.*?)\.(js|js)$");

// if (!(regex.test(val))) {

// alert('Please select correct file format');

// }

}

// var message = 'You picked: ' + url;

// document.getElementById('result').innerHTML = message;

}

</script>

</head>

<body>

<button onclick="onApiLoad()">Pick From Google Drive</button>

</body>

</html>

File download code



<?php
$param = $_REQUEST;
$oAuthToken = $param['oAuthToken'];
$fileId = $param['fileId'];
$getUrl = 'https://www.googleapis.com/drive/v2/files/' . $fileId . '?alt=media';
$authHeader = 'Authorization: Bearer ' . $oAuthToken;
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $getUrl);
curl_setopt($ch, CURLOPT_HTTPHEADER, array($authHeader));
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
$data = curl_exec($ch);
$error = curl_error($ch);
curl_close($ch);
file_put_contents($param['name'], $data);
echo json_encode($error);
?>

<?php

$param = $_REQUEST;

$oAuthToken = $param['oAuthToken'];

$fileId = $param['fileId'];

$getUrl = 'https://www.googleapis.com/drive/v2/files/' . $fileId . '?alt=media';

$authHeader = 'Authorization: Bearer ' . $oAuthToken;

$ch = curl_init();

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_URL, $getUrl);

curl_setopt($ch, CURLOPT_HTTPHEADER, array($authHeader));

curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);

$data = curl_exec($ch);

$error = curl_error($ch);

curl_close($ch);

file_put_contents($param['name'], $data);

echo json_encode($error);

WeAnswer

See author's posts

Tags: Google Drive Picker

Follow the steps

WeAnswer

CPU & Memory usage in PHP

Install PHP mcrypt extension on Ubuntu

Text to speech

How to set EC2 Ubuntu default password

CPU & Memory usage in PHP

Install PHP mcrypt extension on Ubuntu

How to reset or change the MySQL root password?

Follow the steps

2 thoughts on “Google drive picker demo”

Leave a Reply Cancel reply

More Stories

You may have missed