Are you tired of spending countless hours sifting through files on Google Drive to find what you need? Our Google Drive Picker Demo can help make file selection a breeze.
With our user-friendly interface, you can quickly browse and select the files you need, saving you time and frustration. Plus, our demo is completely secure, so you can rest easy knowing your files are protected.
Here are the steps to create a new project and enable the Google Drive API for the project in the Google Cloud Console:
That's it! Your project is now set up with the Google Drive API and you have a set of credentials that you can use to authenticate requests to the API.
<!DOCTYPE html>
<html>
<head>
<title>Google Drive Picker Demo</title>
<!-- Include the Google API client library -->
<script src="https://apis.google.com/js/api.js"></script>
<script src="https://apis.google.com/js/platform.js"></script>
<!-- Include the picker API client library -->
<script src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
</head>
<body>
<h1>Google Drive Picker Demo</h1>
<button onclick="openPicker()">Select a file from Google Drive</button>
<!-- The Google Drive picker dialog -->
<div id="picker"></div>
<script>
// The API developer key obtained from the Google API Console.
var developerKey = 'YOUR_DEVELOPER_KEY';
// The Client ID obtained from the Google API Console.
var clientId = 'YOUR_CLIENT_ID';
// Scope to use to access user's Drive items.
var scope = ['https://www.googleapis.com/auth/drive.readonly'];
// Load the API client library.
function onApiLoad() {
gapi.load('client:auth2', initClient);
}
// Initialize the API client library and set up the picker.
function initClient() {
gapi.client.init({
apiKey: developerKey,
clientId: clientId,
scope: scope,
discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
}).then(function () {
// Enable the picker when the client is loaded.
document.getElementById('select-file').disabled = false;
});
}
// Open the Google Drive picker.
function openPicker() {
// Create a new instance of the Google Drive picker API.
var picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.setAppId(clientId)
.setOAuthToken(gapi.auth.getToken().access_token)
.addView(google.picker.ViewId.DOCUMENTS)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
// Show the picker dialog.
picker.setVisible(true);
}
// Called when a file is selected from the picker.
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
// Pass the file ID to your server-side script to download the file.
window.location.href = 'download.php?id=' + fileId;
}
}
</script>
</body>
</html>
<?php
// The ID of the file to download.
$fileId = $_GET['id'];
// Create a new instance of the Google Drive API client.
$client = new Google_Client();
$client->setApplicationName('Google Drive Picker Demo');
$client->setScopes([Google_Service_Drive::DRIVE_READONLY]);
$client->setAuthConfig('path/to/client_secret.json');
$service = new Google_Service_Drive($client);
// Get the file metadata.
$file = $service->files->get($fileId);
// Download the file content.
$content = $service->files->get($fileId, ['alt' => 'media'])->getBody();
// Set the headers