React.js Google Drive File Picker API to Upload,Download Files to Drive in Browser Using react-google-drive-picker Library Using Javascript Full Project For Beginners

npx create-react-app sampleapp

npm i react-google-drive-picker

App.js

import { useEffect } from "react";
import useDrivePicker from "react-google-drive-picker";

function App() {
  const [openPicker, data, authResponse] = useDrivePicker();
  // const customViewsArray = [new google.picker.DocsView()]; // custom view
  const handleOpenPicker = () => {
    openPicker({
      clientId:"####yourclientid###",
      developerKey:"###yourapikey###",
      viewId:"DOCS",
      //token:"##youraccesstoken##", // pass oauth token in case you already have one
      showUploadView: true,
      showUploadFolders: true,
      supportDrives: true,
      multiselect: true,
      // customViews: customViewsArray, // custom view
    });
  };

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

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

export default App;

import { useEffect } from "react";

import useDrivePicker from "react-google-drive-picker";

function App() {

const [openPicker, data, authResponse] = useDrivePicker();

// const customViewsArray = [new google.picker.DocsView()]; // custom view

const handleOpenPicker = () => {

openPicker({

clientId:"####yourclientid###",

developerKey:"###yourapikey###",

viewId:"DOCS",

//token:"##youraccesstoken##", // pass oauth token in case you already have one

showUploadView: true,

showUploadFolders: true,

supportDrives: true,

multiselect: true,

// customViews: customViewsArray, // custom view

});

};

useEffect(() => {

// do anything with the selected/uploaded files

if (data) {

data.docs.map((i) => console.log(i));

}

}, [data]);

return (

<div>

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

</div>

);

}

export default App;

Related posts:

You Might Also Like

Build a React Native StopWatch Background Timer Component Using react-native-background-timer Library in Javascript Full Project For Beginners

Next.js Server Side React Fetch JSONPlaceholder API Example Using isomorphic-unfetch Library Full Project For Beginners

React.js Tutorial to Display Multiple Images as Thumbnails From Unsplash API Using react-thumbnails Library in Browser Using TypeScript Full Project For Beginners

Leave a Reply Cancel reply