Try Our Google Drive Picker Demo for Easy File Selection

Looking for an easy way to select files from Google Drive? Try our Google Drive Picker Demo! With just a few clicks, you can browse and select the files you need.

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:

  1. Go to the Google Cloud Console (console.cloud.google.com) and sign in with your Google account.
  2. Click the project dropdown menu in the top navigation bar and select "New Project".
  3. Enter a name for your project and click "Create".
  4. Once your project is created, click the hamburger menu in the top-left corner and select "APIs & Services" > "Dashboard".
  5. Click the "+ ENABLE APIS AND SERVICES" button at the top of the page.
  6. Search for "Google Drive API" and select it from the results.
  7. Click the "ENABLE" button to enable the API for your project.
  8. Click the "Create credentials" button to create a new set of credentials for your project.
  9. Select "OAuth client ID" as the credential type.
  10. Choose "Web application" as the application type and enter a name for your OAuth 2.0 client ID.
  11. In the "Authorized JavaScript origins" field, enter the origin of your web application (e.g. "http://localhost:8000").
  12. In the "Authorized redirect URIs" field, enter the URL where users will be redirected after signing in with Google (e.g. "http://localhost:8000/oauth2callback.php").
  13. Click "Create" to create your OAuth 2.0 client ID.
  14. Copy the "Client ID" and "Client Secret" values for use in your application.

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.

First, create an HTML file with a button to open the picker:

 <!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>

Next, create a PHP file (download.php) to handle the file download:

 <?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