How to get file names from Google Drive API using JavaScript

Other Questions Google drive
1

I’m working on a JavaScript project where I need to display all file names from my Google Drive root folder. I’m pretty new to working with APIs in JavaScript so I might be missing something basic.

I found some example code online and modified it, but when I run it, I only get “[object Object],[object Object]” repeated for each file instead of the actual file names. The count matches my files so the API call is working, but I can’t figure out how to extract the file names or IDs from the response.

I’ve tried accessing different properties like response.kind and response.selflink but those just return undefined. Here’s my current code:

function getAllDriveFiles(parentId, callbackFn) {
  var fetchChildrenPage = function(apiRequest, resultArray) {
    apiRequest.execute(function(apiResponse) {
      resultArray = resultArray.concat(apiResponse.items);
      var nextToken = apiResponse.nextPageToken;
      if (nextToken) {
        apiRequest = gapi.client.drive.children.list({
          'folderId': parentId,
          'pageToken': nextToken
        });
        fetchChildrenPage(apiRequest, resultArray);
      } else {
        callbackFn(resultArray);
      }
    });
  }
  var firstRequest = gapi.client.drive.children.list({
    'folderId': parentId
  });
  fetchChildrenPage(firstRequest, []);
}

function displayResults(data) {
  document.getElementById("output").innerHTML = data;
}

function startFileRetrieval() {
  gapi.client.load('drive', 'v2', function() {
    getAllDriveFiles('root', displayResults);
  });
}

What am I doing wrong? How can I get the actual file names to display instead of object references?

2

I hit this exact problem when I started using Google Drive API. You’re getting file references, not actual file data. Your current approach with children.list just returns an array of objects with file IDs - that’s why you see object references when you try to display them.

You need a second API call to get the file metadata. For each item in your resultArray, call gapi.client.drive.files.get() with the file ID to grab the name property. But this creates multiple API requests, which sucks for performance.

I’d stick with v2 if you have to, but use files.list() with the q parameter set to 'root' in parents instead of the children endpoint. You’ll get all the file metadata including names in one request. Just specify the fields parameter to only fetch what you actually need.

3

You’re using the old v2 API which makes this way harder than it needs to be. The children.list endpoint only gives you file IDs - you won’t get the actual file names. Switch to Drive API v3 and use files.list() instead:

function getFileNames() {
  gapi.client.drive.files.list({
    q: "'root' in parents",
    fields: "files(id,name)"
  }).then(function(response) {
    const files = response.result.files;
    const fileNames = files.map(file => file.name);
    document.getElementById("output").innerHTML = fileNames.join('<br>');
  });
}

This grabs file names directly - no more separate API calls for each file. The fields parameter keeps the response lean by only returning id and name. Don’t forget to load v3 with gapi.client.load('drive', 'v3') instead of v2.

4

the children.list only gives file ids, not metadata. u need to use files.get() for each id to get the name prop. a better way is files.list() with q=‘parents in “root”’ to fetch all file details in one go.