JavaScript implementation for fetching Google Drive file list

Other Questions Google drive
1

I’m working on a project to display files from Google Drive using their API. Here’s my code:

const appId = 'myapp123.apps.googleusercontent.com';
const secretKey = 'abcdefg';
const permissions = 'https://www.googleapis.com/auth/drive';

function initializeApp() {
    gapi.client.setApiKey(secretKey);
    setTimeout(verifyAccess, 1);
}

function verifyAccess() {
    gapi.auth.authorize({client_id: appId, scope: permissions, immediate: true}, handleAuthOutcome);
}

function handleAuthOutcome(result) {
    const loginButton = document.getElementById('login-button');
    
    if (result && !result.error) {
        loginButton.style.display = 'none';
        fetchFileList();
    } else {
        loginButton.style.display = 'block';
        loginButton.onclick = triggerAuth;
    }
}

function triggerAuth(event) {
    gapi.auth.authorize({client_id: appId, scope: [permissions], immediate: false}, handleAuthOutcome);
    return false;
}

function fetchFileList() {  
    gapi.client.load('drive', 'v2', sendRequest);
}

function sendRequest() {
    const query = gapi.client.drive.files.list({limit: 5});

    query.execute(function(response) {          
        response.items.forEach(item => {
            const fileName = item.title;
            const updateTime = item.modifiedDate;
            const editor = item.lastModifyingUserName;

            const listItem = document.createElement('li');
            listItem.textContent = `File: ${fileName} | Updated: ${updateTime} | Editor: ${editor}`;
            document.getElementById('file-list').appendChild(listItem);
        });
    });    
}

When I run this, I get an error: Uncaught TypeError: Cannot read property 'files' of undefined on the line with gapi.client.drive.files.list. What am I doing wrong?

2

hey, i had this problem too. make sure you’re waiting for the api to load completely. try this:

gapi.load('client', function() {
  gapi.client.load('drive', 'v3', function() {
    // your code here
  });
});

also, double check ur api key and client id. sometimes those can be tricky

3

I’ve dealt with this issue before. The problem likely stems from the API not being fully loaded when you’re trying to access it. Here’s a suggestion:

Modify your fetchFileList function to ensure the API is ready:

function fetchFileList() {
    gapi.client.load('drive', 'v3').then(function() {
        sendRequest();
    }, function(error) {
        console.error('Error loading Drive API:', error);
    });
}

Also, update your sendRequest function to use the v3 API:

function sendRequest() {
    gapi.client.drive.files.list({
        pageSize: 5,
        fields: 'files(name, modifiedTime, lastModifyingUser)'
    }).then(function(response) {
        var files = response.result.files;
        // Process files here
    });
}

These changes should resolve the ‘undefined’ error you’re encountering. Remember to enable the Drive API in your Google Cloud Console as well.

4

I’ve encountered a similar issue before, and it sounds like the Google Drive API might not be loading correctly. Here’s what worked for me:

In your fetchFileList function, try adding a check to ensure the Drive API is fully loaded before making the request:

function fetchFileList() {
    gapi.client.load('drive', 'v3', function() {
        if (gapi.client.drive) {
            sendRequest();
        } else {
            console.error('Drive API failed to load');
        }
    });
}

Also, make sure you’re using the correct API version. I noticed you’re using ‘v2’, but ‘v3’ is the current version. Update your gapi.client.load call to use ‘v3’ instead.

Lastly, double-check that you’ve enabled the Drive API in your Google Cloud Console project. Sometimes, this step is easy to overlook.

If you’re still having trouble after these changes, try adding some console.log statements throughout your code to pinpoint where exactly the error is occurring. This helped me immensely when debugging my own implementation.