View Flexibility

[damoclark]

Thanks @Jose-cd for creating this module. You published it moments before I went looking for exactly this component. :)

I am guessing you created the component for your own project, and decided to publish it so that others could make use of it. It appears you use it for uploading in your own project as I see an emphasis on that functionality in your API. I'm doing the opposite, using the Picker to select Spreadsheets, or Folders, and I can't do that with the use of hard-coded DocsUploadView. For instance, I can't use setIncludeFolders in combination with Spreadsheets view.

I am wondering whether you could broaden the external API to allow more expansive use of Google's Views options? Take a look at this article for what I mean. Normally I would issue a PR, but I'm afraid Typescript is not something I am at all familiar with.

Cheers, Damien.

[Jose-cd]

Hi @damoclark , no problem, i'm glad you found this module useful.

Yes you're right I do use this library for uploading , however I added the option to add custom mimeTypes, setIncludeFolders, setSelectFolderEnabled, and custom new views.

I can't use setIncludeFolders in combination with Spreadsheets view.

Sadly as far as I know for some reason the drive picker API doesn't let us do that.

[damoclark]

Hi again @Jose-cd

I noticed your recent changes. Thanks for looking into this further.

I had a go myself, although I am only new to Typescript. I get a cross-origin error when I attempt to test my code, so I haven't been able to dig deeper into the cause of the error. However, this was the type of API I was thinking of for React-google-drive-picker. It aligns closely with the Google API, and also customising each view, based on methods available to the view class. It also allows the DocsView and DocsUploadView to be passed in a single array of possible views.

What do you think of the approach I've used? Is it something that you could incorporate into your library (and fix my bugs)? :)

For example:

import {useEffect} from 'react';
import useDrivePicker from './dist/index';

function App() {
  const [openPicker, data] = useDrivePicker();
  const handleOpenPicker = () => {
    openPicker({
      clientId: "xxxxxxxxxxxxxxxxx",
      developerKey: "xxxxxxxxxxxx",
      views: [
        {
          viewId: "DOCS",
          enableDrives: true,
          includeFolders: true,
          selectFolderEnabled: false,
          viewMode: "LIST",
          ownedByMe: false,
          parent: "xxxxxxxxxxxx",
          isStarred: false
        },
        {
          mimeTypes: "image/jpg",
          includeFolders: true,
          parent: "xxxxxxxxxxxx"
        }
      ],
      // token: token, // pass oauth token in case you already have one
      appId: "xxxxxxxxxx",
      mineOnly: false,
      navHidden: false,
      disabled: false,
      supportDrives: true,
      multiselect: true
    })
  }

  useEffect(() => {
    // do anything with the selected/uploaded files
    if (data) {
      data.docs.map(i => console.log(i.name))
    }
  }, [data])

  return (
      <div>
        <button onClick={() => handleOpenPicker()}>Open Picker</button>
      </div>
  );
}

export default App;

[Jose-cd]

Hi @damoclark , I checked your code and it absolutely makes sense, i'll 100% implement this approach in the next version :

openPicker({
      clientId: "xxxxxxxxxxxxxxxxx",
      developerKey: "xxxxxxxxxxxx",
      views: [
        {
          viewId: "DOCS",
          enableDrives: true,
          includeFolders: true,
          selectFolderEnabled: false,
          viewMode: "LIST",
          ownedByMe: false,
          parent: "xxxxxxxxxxxx",
          isStarred: false
        },
        {
          mimeTypes: "image/jpg",
          includeFolders: true,
          parent: "xxxxxxxxxxxx"
        }
      ],
      // token: token, // pass oauth token in case you already have one
      appId: "xxxxxxxxxx",
      mineOnly: false,
      navHidden: false,
      disabled: false,
      supportDrives: true,
      multiselect: true
    })

By now it is working like this:

const uploadView = new google.picker.DocsUploadView().setIncludeFolders(true);
const filesView = new google.picker.DocsView().setMimeTypes('image/jpg');
const customViewsArray = [uploadView, filesView];

const handleOpenPicker = () => {
    openPicker({
      clientId: "xxxxxxxxxxxxxxxxx",
      developerKey: "xxxxxxxxxxxx",
      viewId: "DOCS",
      // token: token, // pass oauth token in case you already have one
      showUploadView: true,
      showUploadFolders: true,
      supportDrives: true,
      multiselect: true,
      customViews: customViewsArray,
    })
  }

[PurplePineapple123]

@Jose-cd Using new google.picker.OTHER_METHODS returns the error: 'google' is not defined no-undef. Do you have suggestions on how to resolve this? Thanks!