Search code examples
google-docsgoogle-picker

Google file picker Recent tab


I got a Google drive picker item on my web app. Looking at Google Docs I find out the it display one option tab called "Recent".

Following the documentation at https://developers.google.com/picker/docs/reference I couldn't find any reference to this tab mode, only found "Recently Picked" for files I recently picked from the picker, but I'm looking to emulate this function.

My current code is

new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .enableFeature(google.picker.Feature.SUPPORT_TEAM_DRIVES)
        .setAppId(appId)
        .setOAuthToken(oauthToken)
        .addView(new google.picker.DocsView().setIncludeFolders(true).setOwnedByMe(true))
        .addView(new google.picker.DocsView().setIncludeFolders(true).setOwnedByMe(false))
        .addView(new google.picker.DocsView().setStarred(true).setLabel('Starred'))

Solution

  • finally after reading the documentation of Google picker and the google groups dedicated to it, I figured out that there is no preset or config for recent uploaded files and even trying to build a custom view with google.picker.view, the query field is quite limited and didn't allow the option to sort the files.

    After reading the javascript code of docs.google.com for the file picker I found few variables that are accessible in the moment when you call the method .addView(). This field are:

    1. El: is the filter type for the document type.
    2. mc: this old the whole view configuration and fields. Example: mc.query is equivalent for the View.setQuery.
    3. xd: this field manage the View title in the top nav tab title.

    While this method is a bit hacky, is the only option I got in the meantime to replicate the "recent" view tab from google docs. Here is the code I used:

    let recentView = new google.picker.DocsView();
    
    recentView.xd = 'Recent';
    recentView.mc.sortKey = 15;
    
    let picker = new google.picker.PickerBuilder()
    .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
    .enableFeature(google.picker.Feature.SUPPORT_TEAM_DRIVES)
    .setAppId(appId)
    .setOAuthToken(oauthToken)
    .addView(new google.picker.DocsView().setIncludeFolders(true).setOwnedByMe(true))
    .addView(new google.picker.DocsView().setIncludeFolders(true).setOwnedByMe(false))
    .addView(new google.picker.DocsView().setIncludeFolders(true).setStarred(true).setLabel('Starred'))
    .addView(recentView)
    .addView(new google.picker.DocsUploadView().setIncludeFolders(true))
    .setDeveloperKey(developerKey)
    .setCallback(onFilePickerCB)