Using google picker to only display Shared Drives

Question

Right now Google picker is displaying all my files such as text files, images, etc etc, how can i get it so that it only shows Shared Drives, I'm assuming it has to do something with the MimeTypes parameter but i don't know what to put there. Any ideas you guys have for it?

import React, {Component} from 'react';
import GooglePicker from 'react-google-picker';

const SharedDriveAction = ({SharedDriveAction}) => {
   return (
  <GooglePicker clientId={'*****************'}
          developerKey={'*************'}
          scope={['https://www.googleapis.com/auth/drive.readonly']}
          onChange={data => console.log('on change:', data)}
          onAuthFailed={data => console.log('on auth failed:', data)}
          multiselect={true}
          navHidden={true}
          authImmediate={false}
          mimeTypes={[]}
          viewId={'DOCS'}>
 </GooglePicker>
 );
}
export default SharedDriveAction;

score 0 · Answer 1 · edited Nov 05 '21 at 02:26

Answer:

You need to create a custom Picker with setEnableDrives() set to true and Feature.SUPPORT_DRIVES on.

Custom Build Method:

As per the React Google Picker npm documentation you can build a custom picker to include these settings:

<GooglePicker clientId={CLIENT_ID}
              developerKey={DEVELOPER_KEY}
              scope={SCOPE}
              onChange={data => console.log('on change:', data)}
              onAuthFailed={data => console.log('on auth failed:', data)}
              multiselect={true}
              navHidden={true}
              authImmediate={false}
              viewId={'FOLDERS'}
              createPicker={ (google, oauthToken) => {
                const googleViewId = google.picker.ViewId.FOLDERS;
                const docsView = new google.picker.DocsView(googleViewId)
                    .setIncludeFolders(true)
                    .setMimeTypes('application/vnd.google-apps.folder')
                    .setSelectFolderEnabled(true)
                    .setEnableDrives(true);

                const picker = new window.google.picker.PickerBuilder()
                    .addView(docsView)
                    .enableFeature(window.google.picker.Feature.SUPPORT_DRIVES)
                    .setOAuthToken(oauthToken)
                    .setDeveloperKey(DEVELOPER_KEY)
                    .setCallback(()=>{
                      console.log('Custom picker is ready!');
                    });

                picker.build().setVisible(true);
            }}
        >
            <span>Click</span>
            <div className="google"></div>
        </GooglePicker>

Using google picker to only display Shared Drives

1 Answers1

Answer:

Custom Build Method:

References:

Related Questions: