Trying to fetch images from a Google Drive folder

32 views Asked by At

I'm trying to access a Google Drive folder in my React app, but getting an empty array back in the payload. Should I change the fields to fix it? Or is the q query wrong?

import axios from 'axios';
import { IImage } from '../interfaces/Image.interface';

const GOOGLE_DRIVE_API_KEY = 'XXX';
const GOOGLE_DRIVE_FOLDER_ID = 'XXX';

export const fetchImages = async () => {
  try {
    const response = await axios.get(
      `https://www.googleapis.com/drive/v3/files`,
      {
        params: {
          q: `'${GOOGLE_DRIVE_FOLDER_ID}' in parents and mimeType contains 'image/'`,
          key: GOOGLE_DRIVE_API_KEY,
          fields: 'files(id,name,webContentLink,mimeType)',
        },
      }
    );

    const files = response.data.files;
    const images: IImage[] = files.map((file: any) => ({
      id: file.id,
      name: file.name,
      url: `https://drive.google.com/uc?export=view&id=${file.id}`,
      mimeType: file.mimeType,
    }));

    return images;
  } catch (error) {
    console.error('Error fetching images from Google Drive:', error);
    return [];
  }
};
0

There are 0 answers