Google Drive Image Display Issue
I have a working system that uploads files to Google Drive through their API and sets proper public permissions. Although the upload works smoothly and I can view the files in my Drive folder, displaying these images in my React frontend leads to crashes.
Backend Upload Code
import { google } from "googleapis";
import { NextRequest, NextResponse } from "next/server";
import { Readable } from "stream";
const SPREADSHEET_ID = process.env.SPREADSHEET_ID!;
const CLIENT_EMAIL = process.env.CLIENT_EMAIL!;
const PRIVATE_KEY = process.env.PRIVATE_KEY!.replace(/\\n/g, "\n");
const FOLDER_ID = process.env.FOLDER_ID!;
export async function POST(request: NextRequest) {
try {
const data = await request.formData();
const username = data.get("username") as string;
const userEmail = data.get("userEmail") as string;
const userMessage = data.get("userMessage") as string;
const uploadedFile = data.get("image") as File | null;
if (!username || !userEmail || !userMessage) {
return NextResponse.json({ error: "Required fields missing" }, { status: 400 });
}
const authentication = new google.auth.JWT(
CLIENT_EMAIL,
undefined,
PRIVATE_KEY,
[
"https://www.googleapis.com/auth/spreadsheets",
"https://www.googleapis.com/auth/drive",
]
);
const sheetsApi = google.sheets({ version: "v4", auth: authentication });
const driveApi = google.drive({ version: "v3", auth: authentication });
let photoUrl = "";
if (uploadedFile && uploadedFile.size > 0) {
const fileBuffer = Buffer.from(await uploadedFile.arrayBuffer());
const uploadResult = await driveApi.files.create({
requestBody: {
name: uploadedFile.name,
parents: [FOLDER_ID],
},
media: {
mimeType: uploadedFile.type,
body: Readable.from(fileBuffer),
},
fields: "id",
});
const newFileId = uploadResult.data.id;
if (newFileId) {
await driveApi.permissions.create({
fileId: newFileId,
requestBody: {
role: "reader",
type: "anyone",
},
});
photoUrl = `https://drive.google.com/uc?export=view&id=${newFileId}`;
}
}
await sheetsApi.spreadsheets.values.append({
spreadsheetId: SPREADSHEET_ID,
range: "Sheet1!A:D",
valueInputOption: "USER_ENTERED",
requestBody: {
values: [[username, userEmail, userMessage, photoUrl]],
},
});
return NextResponse.json({ success: true }, { status: 200 });
} catch (err) {
console.error("Upload error:", err);
return NextResponse.json({ error: "Upload failed" }, { status: 500 });
}
}
Frontend Display Code
"use client";
import { Box, Image, Stack } from "@mantine/core";
import { useEffect, useState } from "react";
interface DataEntry {
username: string;
userEmail: string;
userMessage: string;
photoId: string;
photoUrl: string | null;
}
export default function DisplayPage() {
const [entries, setEntries] = useState<DataEntry[]>([]);
useEffect(() => {
const loadData = async () => {
const response = await fetch("/api/fetch-data");
const result = await response.json();
setEntries(result);
};
loadData();
}, []);
return (
<Stack>
{entries.map((entry, index) => (
<Box key={index}>
<Image
width={250}
height={250}
src={entry.photoUrl}
alt="User upload"
/>
</Box>
))}
</Stack>
);
}
I’ve been struggling with this for multiple days now. The uploads succeed, yet showing these images causes my application to crash. Any suggestions on what could be the issue?