Magdy Atef Zahran

إزاي تعمل File Upload SaaS Production-Ready بـ Next.js (Frontend) + .NET (Backend) 📂⚡

رفع ملفات مش بس إن المستخدم يختار صورة ويضغط Upload…
في اي SaaS حقيقي الموضوع معقد اكتر: أمان وحجم ملفات ضخم وسرعة وCDN وتكلفة تخزين وفحص فيروسات… إلخ.

طيب إيه الحل السليم هنا…؟

إننا ندي Next.js دور الـ Frontend (واجهة المستخدم + Auth + SSR)
و .NET Core يمسك الـ Backend (Presigned URLs + Metadata + Workers + Policies).
والتخزين نفسه على S3 أو Azure Blob + CDN.

الـ Architecture ببساطة:

Next.js (Frontend):
- تسجيل الدخول بـ NextAuth (JWT + Roles)
- واجهة رفع ب Progress Bar + Resumable Upload
- يطلب من .NET Presigned URL أو Multipart Upload Session
- بعد الرفع يسجل Metadata
.NET (Backend):
- يولد Presigned URL بمدة قصيرة + Validation.
- يتحقق من JWT (مين المستخدم + صلاحياته)
- يسجّل Metadata في DB (Postgres/SQL Server)
- Workers تعمل: فحص فيروسات / تحويل صور / تقسيم فيديو / Thumbnails
- يبعت Notification (Email/Webhook/Realtime) لما المعالجة تخلص
- Signed Download URLs عند التحميل
- Usage Limits حسب الـ Plan (Free/Pro/Enterprise)
Storage + CDN:
- S3 أو Azure Blob + CloudFront/Azure CDN
- Lifecycle Rules + Encryption + Versioning
- Multipart Upload للملفات الضخمة

طيب ليه Direct + Multipart Upload مهم؟

السيرفر مش بيشيل ملفات ضخمة.
أسرع وأرخص (Client = Storage مباشرة).
Multipart يخليك ترفع ملفات بالـ GBs، ولو النت قطع تكمل من آخر Chunk (Resumable).
أسهل تعمل Scale

1️⃣ واجهة الدخول بـ NextAuth (JWT + Roles)

// app/api/auth/[...nextauth]/route.ts import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; const handler = NextAuth({ session: { strategy: "jwt" }, providers: [CredentialsProvider({ async authorize(creds) { return { id: "u_123", email: creds?.email, role: "pro" } as any; }})], callbacks: { async jwt({ token, user }) { if (user) { token.uid = (user as any).id; token.role = (user as any).role; } return token; }, async session({ session, token }) { (session as any).user.id = token.uid; (session as any).user.role = token.role; return session; }, }, }); export { handler as GET, handler as POST };

2️⃣ Next.js هيطلب Presigned URL أو Multipart Upload Session من .NET

// app/api/uploads/presign/route.ts import { NextResponse } from "next/server"; import { getServerSession } from "next-auth"; export async function POST(req: Request) { const session = await getServerSession(); if (!session?.user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 }); const { filename, contentType, size } = await req.json(); const res = await fetch(`${process.env.BACKEND_URL}/api/uploads/presign`, { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${session.user.id}` }, body: JSON.stringify({ filename, contentType, size }), }); return NextResponse.json(await res.json(), { status: res.status }); }

3️⃣ واجهة رفع مع Progress + Resumable

(ممكن تستخدم مكتبات زي Uppy أو tus-js-client)

"use client"; import { useState } from "react"; export default function Uploader() { const [file, setFile] = useState<File | null>(null); const [progress, setProgress] = useState(0); const upload = async () => { if (!file) return; const presign = await fetch("/api/uploads/presign", { method: "POST", body: JSON.stringify({ filename: file.name, contentType: file.type, size: file.size }), }).then(r => r.json()); const xhr = new XMLHttpRequest(); xhr.upload.onprogress = (e) => setProgress(Math.round((e.loaded / e.total) * 100)); xhr.open("PUT", presign.url, true); xhr.setRequestHeader("Content-Type", file.type); xhr.send(file); }; return ( <div> <input type="file" onChange={(e) => setFile(e.target.files?.[0] ?? null)} /> <button onClick={upload}>Upload</button> <p>{progress}%</p> </div> ); }