google-apigoogle-picker

How to show a list of "shared with me" files in Google Picker

Google Picker is working fine for the user's own Drive, but I want to add the option to see files shared with the user, as per drive.google.com where you have both My Drive and Shared with me:

enter image description here

This is the code that gets closest:

const sharedDocsView = new window.google.picker.DocsView();
    sharedDocsView.setEnableDrives(true); // adds Shared Drives
    sharedDocsView.setOwnedByMe(false);
    sharedDocsView.setMode(window.google.picker.DocsViewMode.LIST);
    pickerBuilder.addView(sharedDocsView);

This gets a Shared Drives tab, but it starts out empty:

enter image description here

However, if you start typing in the search field, it then shows any files that match:

enter image description here

Have experimented with the API, but have not found any combination that will just let the user browse their Shared with me files.

Solution

  • TL;DR: Remove .setEnableDrives(true), you just need setOwnedByMe(false).

    Explanation: Judging by your screenshot you don't seem to have any Shared Drives. These are not the same as shared files, and they have a different structure:

    Shared drives follow different organization, sharing, and ownership models from My Drive.

    Shared Drives look like this in your Drive:

    Shared Drives view

    When you set the method .setEnableDrives(true) you're telling the Picker to include Shared Drives. This makes it prioritize the view of these Drives and the "Shared with me" files are included only in the "background" as searchable items, since these have very different views that are not compatible with each other. For example, this is what your view looks like for me:

    enter image description here

    The above view shows the Shared Drive structure but you can still search for your "Shared with me" files. You'll notice that there's also a "Shared with me" tab. I created that view by using only .setOwnedByMe(false). This view doesn't include the Shared Drives, but it shows just the shared files as you want:

    enter image description here

    The sample code to create these views is this:

        const shareddrivesview = new google.picker.DocsView(google.picker.ViewId.DOCS)
          .setEnableDrives(true)
          .setIncludeFolders(true); // creates just the shared drives view

    const sharedwithmeview = new google.picker.DocsView(google.picker.ViewId.DOCS)
          .setOwnedByMe(false); // creates just the shared with me view

    var picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setDeveloperKey(API_KEY)
        .setAppId(APP_ID)
        .setOAuthToken(accessToken)
        .addView(shareddrivesview)
        .addView(sharedwithmeview)
        .setCallback(pickerCallback)
        .build()

    picker.setVisible(true);

    Essentially, you don't want to combine setEnableDrives(true) with setOwnedByMe(false) in the same view unless you want users to have to search their shared files manually. You're better off creating separate views for each of them or remove Shared Drive support if you don't plan to use it.

    Sources: