Hosting pictures with React and Google drive

Question

I would like to host around 300 photo on Google drive and be able to fetch every photo on my react project, but I don't know how to start like should I need a back-end like node.js? I've seen this video (https://www.youtube.com/watch?v=iajv8y-6n3Q), but he displays only 1 photo.

I wanna display all my images from Google drive on the React and put it on a array like this following JSON

const photos = [
  {
    src: 'https://source.unsplash.com/2ShvY8Lf6l0/800x599',
    width: 4,
    height: 3,
    year: '2021',
    event: 'Hiking',
  },
  {
    src: 'https://source.unsplash.com/Dm-qxdynoEc/800x799',
    width: 1,
    height: 1,
    year: '2021',
    event: 'J-On',
  },
  {
    src: 'https://source.unsplash.com/qDkso9nvCg0/600x799',
    width: 3,
    height: 4,
    year: '2021',
    event: 'Language Exchange',
  },
  and so on...

 

Answer 1

You can achieve your goal in two ways:

1. Get the files link by manually copying the link from google drive
2. Fetch the data by using Next.js app and googleapis.

1. Get the files link by manually copying the link from google drive:

• Open the file on google drive
• Right click at the image file
• Click Get Link and a pop up will open
• At General Access select Anyone with the link and make sure the role is Viewer
• Click Copy Link and done.

Then paste it at any text editor, and you will get the link like this:

https://drive.google.com/file/d/1WS45ByTh_e8QNJTeFMGI8TYpE4OYS2U4/view?usp=sharing

Remove the file/d and replace it with uc?export=view&id= and remove the /view?usp=sharing completely and you will get something like:

https://drive.google.com/uc?export=view&id=1WS45ByTh_e8QNJTeFMGI8TYpE4OYS2U4

And put the image information in an array:

const images = [
    {
       name: "Doctor Strange in the Multiverse of Madness",
       src: "https://drive.google.com/uc?export=view&id=1WS45ByTh_e8QNJTeFMGI8TYpE4OYS2U4"
    }
]

Please do the same with the other files, and your images constant finally looks like this:

const images = [
  {
    name: "Doctor Strange in the Multiverse of Madness",
    src:
      "https://drive.google.com/uc?export=view&id=1WS45ByTh_e8QNJTeFMGI8TYpE4OYS2U4",
  },
  {
    name: "Minions: The Rise of Gru",
    src:
      "https://drive.google.com/uc?export=view&id=1eUvlVjwp2brHnyD-cWN0x-10tuS_wXfU",
  },
  ...
  ,
  {
    name: "Fantastic Beasts: The Secrets of Dumbledore",
    src:
      "https://drive.google.com/uc?export=view&id=1vU64yCMdu_ns4xPP-VMYoiJPKNietxRc",
  },
];

Now, it is time to render the images in our React Application by using javascript's map method:

export default function App() {
  return (
    <div>
      <div>My Google Drive Images</div>
      <ul>
        {images.map((image, index) => {
          return (
            <li key={index}>
              <h1>{image.name}</h1>
              <img src={image.src} alt={image.name} />
            </li>
          );
        })}
      </ul>
    </div>
  );
}

2. Fetch the data by using Next.js app and googleapis.

In case we have many photos, it is better to use data fetching. Here we use Next.js app and googleapis library.

There are 3 pieces of information that we need to provide in order to be able to fetch data from https://www.googleapis.com/drive/v2 server which are:

1. CLIENT_ID
2. CLIENT_SECRET
3. REFRESH_TOKEN

For CLIENT_ID & CLIENT_SECRET are OAuth 2.0 Client information that can be obtained from Google Developers Console. You can read the details here. And for the REFRESH_TOKEN can be obtained from OAuth 2.0 Playground and the steps are as follows:

1. Go to https://developers.google.com/oauthplayground
2. Click the OAuth 2.0 Configuration button
3. Click Use your own OAuth credentials checkbox
4. Fill the Client ID & Client Secret input with the OAuth 2.0 CLIENT_ID & CLIENT_SECRET that we get from Google Developers Console.
5. Close the configuration popup by clicking the close link button.
6. Find and click the Drive API v3 at Step 1 Select & authorizes APIs.
7. Select https://www.googleapis.com/auth/drive to enable the Authorize APIs button.
8. Next we need to select which information that can be accessed by using the token that will be created by clicking the Authorize APIs button.
9. Then we will be directed to the Sign in with google page. Select the account that we used to generate the CLIENT_ID & CLIENT_SECRET.
10. If the Google hasn’t verified this app page appears, just click Advance and click Go to ...(unsafe) and select the access types that will be granted to our Next.js app then click Continue and you will be redirected to OAuth 2.0 Playground again.
11. Find the Exchange authorization code for tokens button at Step 2 Exchange authorization code for tokens, and click it to get the Refresh token and Access token
12. To make sure that we have generated the tokens correctly, go to https://www.googleapis.com/drive/v2/files?access_token={ACCESS_TOKEN} in your browser. Our configuration is successful if there is a raw JSON page that shows our drive items.

Now, we are ready for coding. We will use our NextJs API to communicate with googleapis server and serve the data to be consumed by our app.

Open your Nextjs app, create a /pages/api/drive-files.ts file, and import googleapis library (here we use Typescript).

import type { NextApiRequest, NextApiResponse } from "next";
import { google } from "googleapis";
...

Create types:

type DriveFile = {
  kind: string;
  id: string;
  name: string;
  mimeType: "image/jpeg";
};

type Data = {
  files: DriveFile[];
};

Add the Data type at the NextApiResponse and the handler will look like this:

export default async function handler(
  _req: NextApiRequest,
  res: NextApiResponse<Data>
) {

  ...
}

Next, create oauth2Client that use CLIENT_ID and CLIENT_SECRET credentials and we use https://developers.google.com/oauthplayground as the redirect uri, setCredentials using REFRESH_TOKEN, and return the google.drive response as JSON;

# /pages/api/drive-files.ts

import type { NextApiRequest, NextApiResponse } from "next";
import { google } from "googleapis";

export type DriveFile = {
  kind: string;
  id: string;
  name: string;
  mimeType: "image/jpeg";
};

export type Data = {
  files: DriveFile[];
};

const CLIENT_ID =
  "777777777777-xxxxddhsl77d7o77777xxxx0v777xx7.apps.googleusercontent.com";
const CLIENT_SECRET = "XXXXXX-777XXXX_-7-hexxxxheAzW_7mr_7_";
const REDIRECT_URI = "https://developers.google.com/oauthplayground";

export default async function handler(
  _req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  const oauth2Client = new google.auth.OAuth2(
    CLIENT_ID,
    CLIENT_SECRET,
    REDIRECT_URI
  );

  oauth2Client.setCredentials({
    refresh_token:
      "1//04tORk-dUiDiJCgYIARAAGAQSNwF-L9Ir1hzh14oOk6gQWMOafDZGvLuka578PwwmZB3UMbB2a0VdcjAbRjtelFoDU92ob_Ws50I",
  });

  const drive = google.drive({
    version: "v3",
    auth: oauth2Client,
    params: {
      q: `mimeType = 'image/jpeg'`,
    },
  });

  const response = await drive.files.list();

  res.status(200).json({ files: response.data.files as DriveFile[] });
}

And when you access http://localhost:3000/api/drive-files from the browser, you will get:

{
  "files":[
    {
      kind: 'drive#file',
      id: '1eUvlVjwp2brHnyD-cWN0x-10tuS_wXfU',
      name: 'Minions: The Rise of Gru.jpg',
      mimeType: 'image/jpeg'
    },
    {
      kind: 'drive#file',
      id: '1vU64yCMdu_ns4xPP-VMYoiJPKNietxRc',
      name: 'Fantastic Beasts: The Secr.jpg',
      mimeType: 'image/jpeg'
    },
    {
      kind: 'drive#file',
      id: '1WS45ByTh_e8QNJTeFMGI8TYpE4OYS2U4',
      name: 'Doctor Strange in the M.jpg',
      mimeType: 'image/jpeg'
    }
  ]
}

Since we will use NextJs Image component, don't forget to add domain drive.google.com at next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["drive.google.com"],
  },
};

module.exports = nextConfig;

Finally, you can render the images as follows:

import { useEffect, useState } from "react";
import type { NextPage } from "next";
import axios from "axios";
import { DriveFile } from "./api/drive-files";
import Image from "next/image";

const DriveFiles: NextPage = () => {
  const [files, setFiles] = useState<DriveFile[]>();

  useEffect(() => {
    axios
      .get("/api/drive-files")
      .then((res) => {
        setFiles(res.data.files);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  useEffect(() => {
    console.log(files);
  }, [files]);

  return (
    <>
      <h1>Google Drive Files</h1>
      {files &&
        files.map((file, i) => {
          return (
            <div key={i}>
              <p>{file.name}</p>
              <Image
                width={200}
                height={300}
                src={`https://drive.google.com/uc?export=view&id=${file.id}`}
                alt={file.name}
              />
            </div>
          );
        })}
    </>
  );
};

export default DriveFiles;