Build a React.js Google Drive File Picker API to Upload,View & Download Files in Browser Using JS

App.jsx

import React, { useState } from "react";
import useDrivePicker from "react-google-drive-picker";

function App() {
  const [openPicker, setOpenPicker] = useDrivePicker();
  const [selectedFiles, setSelectedFiles] = useState([]);

  const handleOpenPicker = () => {
    openPicker({
      clientId:"",
      developerKey:"",
      viewId: "DOCS",
      showUploadView: true,
      showUploadFolders: true,
      supportDrives: true,
      multiselect: true,
      callbackFunction: (data) => {
        if (data.action === "cancel") {
          console.log("User clicked cancel/close button");
        } else if (data.docs) {
          console.log(data);
          setSelectedFiles(data.docs); // Store all file details
        }
      },
    });
  };

  return (
    <div style={{ padding: "20px", textAlign: "center" }}>
      <button onClick={handleOpenPicker} style={{ marginBottom: "20px" }}>
        Open Picker
      </button>
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          gap: "20px",
          justifyContent: "center",
        }}
      >
        {selectedFiles.map((file, index) => (
          <div
            key={index}
            style={{
              border: "1px solid #ccc",
              padding: "10px",
              width: "200px",
              textAlign: "left",
            }}
          >
            <h4 style={{ fontSize: "14px", marginBottom: "10px" }}>
              {file.name}
            </h4>
            <p style={{ fontSize: "12px", marginBottom: "10px" }}>
              <strong>Type:</strong> {file.mimeType}
            </p>
            <a href={file.url} target="_blank" rel="noopener noreferrer">
              Open File
            </a>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

import React, { useState } from "react";

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

function App() {

const [openPicker, setOpenPicker] = useDrivePicker();

const [selectedFiles, setSelectedFiles] = useState([]);

const handleOpenPicker = () => {

openPicker({

clientId:"",

developerKey:"",

viewId: "DOCS",

showUploadView: true,

showUploadFolders: true,

supportDrives: true,

multiselect: true,

callbackFunction: (data) => {

if (data.action === "cancel") {

console.log("User clicked cancel/close button");

} else if (data.docs) {

console.log(data);

setSelectedFiles(data.docs); // Store all file details

}

});

};

return (

Open Picker

</button>

<div

style={{

display: "flex",

flexWrap: "wrap",

gap: "20px",

justifyContent: "center",

}}

{selectedFiles.map((file, index) => (

<div

key={index}

style={{

border: "1px solid #ccc",

padding: "10px",

width: "200px",

textAlign: "left",

}}

{file.name}

</h4>

<strong>Type:</strong> {file.mimeType}

</p>

Open File

</a>

</div>

))}

</div>

);

}

export default App;

Build a React.js Google Drive File Picker API to Upload,View & Download Files in Browser Using JS

Comments

Leave a Reply Cancel reply

Archives