Hi, I am working on my own CMS and i want to have storage containers for files. However some of them will be quite large. (3GB)
I am using NextJS and Appwrite together but i keep running into either 1 of 2 issues.
- When running the upload client side, the upload stops the moment someone refreshes the page.
- When running the upload server side, i can't send back the progress. (using NextJS route handler for api also doesnt work as it cant parse the body as formdata with Files. )
TL;DR
Developers wanted to upload large files with progress feedback using NextJS and Appwrite. They faced issues with client-side upload stopping on page refresh and server-side upload not sending back progress. To resolve the server-side issue, they can update the `POST` function in `/app/api/upload/route.ts` to return progress in the response./app/api/upload/route.ts
TypeScript
import { NextResponse } from "next/server";
import { Client, ID, Storage } from "node-appwrite";
// In-memory object to store progress for each file
let progressData: { [key: string]: { progress: number; fileName: string } } =
{};
export async function GET(req: Request) {
const url = new URL(req.url);
const fileId = url.searchParams.get("fileId");
if (!fileId || !progressData[fileId]) {
return NextResponse.json({ error: "File ID not found" }, { status: 404 });
}
return NextResponse.json({ progress: progressData[fileId].progress, fileName: progressData[fileId].fileName });
}
export async function POST(req: Request) {
const formData:FormData = await req.formData();
const file:File = formData.get("file") as File;
const bucketID : string= "67aa1870001eaadbdcbb";
const fileExists : boolean = await FileNameExists(bucketID, file.name);
if (!file) {
return NextResponse.json({ error: "No file uploaded" }, { status: 400 });
}
const fileId = crypto.randomUUID();
progressData[fileId] = { progress: 0, fileName: file.name };
const storage = new Storage(await CreateAdminClient());
let response;
console.log("Starting upload");
response = await storage.createFile(
bucketID,
fileExists ? fileId : ID.unique(),
file,
[],
(progress) => {
progressData[fileId].progress = progress.progress;
}
);
return NextResponse.json({ fileId, progress: progressData[fileId].progress });
}
Recommended threads
- All My Project is Gone
Hello everyone, please help. Why have all my projects suddenly disappeared? I received a warning via email about one of my projects being paused. When I clicked...
- Appwrite for Education
I am writing to report an issue with my account limits. I currently have the GitHub Student Developer Pack active, which should include 10 Appwrite Pro projects...
- How to stop my project from being frozen...
So we encountered an error in production because our appwrite project had been frozen due to inactivity. Is there any way of automating checking in and activity