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
- Websites hosted on my appwrite sites hav...
Hello, all my websites hosted on appwrite sites are not running I am getting this message "This site can’t be reached drivehub.appwrite.network took too long t...
- How i can call increment with operators ...
- Attribute not found in schema on REST AP...
I'm querying a appwrite collection via the REST API on appwrite cloud 1.9.5 (no SDK) via a cloudflare worker and keep getting: ``` {"message":"Invalid query: A...