react-cloud-chooser

react implementation for Google Drive Picker, OneDrive File Picker, Dropbox Chooser API

Description

react component wrapper for all cloud file storage services Dropbox, Google Drive picker, and OneDrive, which lazy loads the scripts needed only once you press the related buttons.

Install

npm

npm install --save react-cloud-chooser

yarn

yarn add react-cloud-chooser

Google Drive

It popups the login first then open google driver picker.

import React from 'react'

import { canOpenGoogleDrive } from 'react-cloud-chooser'

const GoogleDriveBtn = ({ openGoogleDrive, isGoogleDriveLoading }) => (
  <button onClick={openGoogleDrive}>
    Google Drive
    {isGoogleDriveLoading && <span>...</span>}
  </button>
)
const GoogleDriveOpenBtn = canOpenGoogleDrive(GoogleDriveBtn)

function GoogleDriveExample(props) {
  return (
    <GoogleDriveOpenBtn
      clientId='__client_id__'
      appId='__app_id__'
      developerKey='__developer_key__'
      success={console.log}
      mimeTypes="image/png,image/jpeg,image/jpg"
    />
  )
}

prop	value	default value	description
clientId	string	REQUIRED	Google client id
developerKey	string	REQUIRED	Google developer key
appId	string	REQUIRED	"Project number" on the "IAM & Admin"
mimeTypes	string	optional	Comma separated mimetypes to filter files
multiselect	boolean	false	Enable files multi select
token	string	optional	access token which skips auth/login step
success	(files) => {}	optional	function to call when files selected
cancel	function	optional	function to call when cancel is pressed
scope	string[]	['https://www.googleapis.com/auth/drive.readonly']	Array of scopes to auth then use in picker
mapViews	function	(google) => [new google.picker.DocsView(google.picker.ViewId.DOCS), new google.picker.DocsUploadView()]	views to show as tabs in picker
mapPickerBuilder	function	(pickerBuilder) => pickerBuilder	customize picker builder

OneDrive Usage

import React from 'react'

import { canOpenOneDrive } from 'react-cloud-chooser'

const OneDriveBtn = ({ openOneDrive, isOneDriveLoading }) => (
  <button onClick={openOneDrive}>
    OneDrive
    {isOneDriveLoading && <span>...</span>}
  </button>
)
const OneDriveOpenBtn = canOpenOneDrive(OneDriveBtn)

function OneDriveExample(props) {
  return (
    <OneDriveOpenBtn
      clientId='__client_id__'
      action="query"
      success={console.log}
      cancel={() => console.log('cancel pressed')}
    />
  )
}

prop	value	default value	description
clientId	string	REQUIRED	OneDrive client id
action	string	query	action with files selected either "share" or "download" or "query"
multiselect	boolean	false	Enable files multi select
advanced	JSON	optional	advanced customization for the behavior of the picker,
success	(files) => {}	optional	function to call when files selected
cancel	function	optional	function to call when closed without selecting

Dropbox Usage

import React from 'react'

import { canOpenDropbox } from 'react-cloud-chooser'

const DtopboxBtn = ({ openDropbox, isDropboxLoading }) => (
  <button onClick={openDropbox}>
    Dropbox
    {isDropboxLoading && <span>...</span>}
  </button>
)
const DropboxOpenBtn = canOpenDropbox(DtopboxBtn)

function DropboxExample(props) {
  return (
    <DropboxOpenBtn
      appKey="__app_key__"
      linkType='direct' // either direct or preview
      success={console.log}
      extensions='.pdf,.jpg'
    />
  )
}

prop	value	default value	description
appKey	string	REQUIRED	Dropbox app key
linkType	string	preview	either direct or preview for the files selected
extensions	string	optional	file extensions to show only in dropbox
multiselect	boolean	false	Enable files multi select
success	(files) => {}	optional	function to call when files selected
cancel	function	optional	function to call when cancel is pressed

Author and License

MIT © Hesham Hossam [e-mail]