UploadThing + Next.js App Router: بناء نظام رفع ملفات متكامل مع السحب والإفلات

npx create-next-app@latest upload-demo --typescript --tailwind --app --src-dir
cd upload-demo

npm install uploadthing @uploadthing/react

UPLOADTHING_TOKEN=your_token_here

import { createUploadthing, type FileRouter } from "uploadthing/next";
import { UploadThingError } from "uploadthing/server";
 
const f = createUploadthing();
 
export const ourFileRouter = {
  imageUploader: f({
    image: {
      maxFileSize: "4MB",
      maxFileCount: 4,
    },
  })
    .middleware(async ({ req }) => {
      // تشغيل أي منطق من جانب الخادم قبل الرفع
      // مثلاً، التحقق من المصادقة
      const user = { id: "user_123" }; // استبدل بالمصادقة الحقيقية
 
      if (!user) throw new UploadThingError("Unauthorized");
 
      return { userId: user.id };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      console.log("اكتمل الرفع للمستخدم:", metadata.userId);
      console.log("رابط الملف:", file.ufsUrl);
 
      // إرجاع البيانات للعميل
      return { uploadedBy: metadata.userId, url: file.ufsUrl };
    }),
 
  documentUploader: f({
    pdf: { maxFileSize: "16MB", maxFileCount: 1 },
    "application/msword": { maxFileSize: "16MB", maxFileCount: 1 },
  })
    .middleware(async ({ req }) => {
      return { uploadedAt: new Date().toISOString() };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      return { url: file.ufsUrl, uploadedAt: metadata.uploadedAt };
    }),
} satisfies FileRouter;
 
export type OurFileRouter = typeof ourFileRouter;

import { createRouteHandler } from "uploadthing/next";
import { ourFileRouter } from "./core";
 
export const { GET, POST } = createRouteHandler({
  router: ourFileRouter,
});

import {
  generateUploadButton,
  generateUploadDropzone,
  generateReactHelpers,
} from "@uploadthing/react";
import type { OurFileRouter } from "@/app/api/uploadthing/core";
 
export const UploadButton = generateUploadButton<OurFileRouter>();
export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
export const { useUploadThing } = generateReactHelpers<OurFileRouter>();

import "@uploadthing/react/styles.css";

"use client";
 
import { UploadButton } from "@/utils/uploadthing";
import { useState } from "react";
 
interface UploadedFile {
  url: string;
  name: string;
}
 
export default function BasicUpload() {
  const [files, setFiles] = useState<UploadedFile[]>([]);
 
  return (
    <div className="flex flex-col items-center gap-4">
      <h2 className="text-xl font-bold">ارفع صورة</h2>
 
      <UploadButton
        endpoint="imageUploader"
        onClientUploadComplete={(res) => {
          if (res) {
            const uploaded = res.map((file) => ({
              url: file.ufsUrl,
              name: file.name,
            }));
            setFiles((prev) => [...prev, ...uploaded]);
          }
        }}
        onUploadError={(error: Error) => {
          alert(`فشل الرفع: ${error.message}`);
        }}
      />
 
      {files.length > 0 && (
        <div className="grid grid-cols-2 gap-4 mt-4">
          {files.map((file, i) => (
            <div key={i} className="relative">
              <img
                src={file.url}
                alt={file.name}
                className="w-48 h-48 object-cover rounded-lg"
              />
              <p className="text-sm text-center mt-1 truncate w-48">
                {file.name}
              </p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

"use client";
 
import { UploadDropzone } from "@/utils/uploadthing";
import { useState } from "react";
 
interface UploadedFile {
  url: string;
  name: string;
  size: number;
}
 
export default function DropzoneUpload() {
  const [files, setFiles] = useState<UploadedFile[]>([]);
 
  return (
    <div className="w-full max-w-xl mx-auto">
      <h2 className="text-xl font-bold mb-4">أفلِت صورك هنا</h2>
 
      <UploadDropzone
        endpoint="imageUploader"
        onClientUploadComplete={(res) => {
          if (res) {
            const uploaded = res.map((file) => ({
              url: file.ufsUrl,
              name: file.name,
              size: file.size,
            }));
            setFiles((prev) => [...prev, ...uploaded]);
          }
        }}
        onUploadError={(error: Error) => {
          alert(`فشل الرفع: ${error.message}`);
        }}
        config={{ mode: "auto" }}
      />
 
      {files.length > 0 && (
        <div className="mt-6 space-y-2">
          <h3 className="font-semibold">الملفات المرفوعة:</h3>
          {files.map((file, i) => (
            <div
              key={i}
              className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"
            >
              <img
                src={file.url}
                alt={file.name}
                className="w-12 h-12 object-cover rounded"
              />
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium truncate">{file.name}</p>
                <p className="text-xs text-gray-500">
                  {(file.size / 1024).toFixed(1)} كيلوبايت
                </p>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

"use client";
 
import { useUploadThing } from "@/utils/uploadthing";
import { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";
 
interface FileWithPreview extends File {
  preview: string;
}
 
export default function CustomUpload() {
  const [files, setFiles] = useState<FileWithPreview[]>([]);
  const [uploadProgress, setUploadProgress] = useState<number>(0);
  const [uploadedUrls, setUploadedUrls] = useState<string[]>([]);
  const [isUploading, setIsUploading] = useState(false);
 
  const { startUpload } = useUploadThing("imageUploader", {
    onUploadProgress: (progress) => {
      setUploadProgress(progress);
    },
    onClientUploadComplete: (res) => {
      if (res) {
        setUploadedUrls(res.map((file) => file.ufsUrl));
      }
      setIsUploading(false);
      setUploadProgress(0);
      setFiles([]);
    },
    onUploadError: (error) => {
      alert(`خطأ: ${error.message}`);
      setIsUploading(false);
      setUploadProgress(0);
    },
  });
 
  const onDrop = useCallback((acceptedFiles: File[]) => {
    const withPreviews = acceptedFiles.map((file) =>
      Object.assign(file, {
        preview: URL.createObjectURL(file),
      })
    );
    setFiles(withPreviews);
  }, []);
 
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: { "image/*": [".png", ".jpg", ".jpeg", ".webp"] },
    maxFiles: 4,
    maxSize: 4 * 1024 * 1024,
  });
 
  const handleUpload = async () => {
    if (files.length === 0) return;
    setIsUploading(true);
    await startUpload(files);
  };
 
  return (
    <div className="w-full max-w-xl mx-auto space-y-4">
      <h2 className="text-xl font-bold">رفع مخصص مع معاينة</h2>
 
      <div
        {...getRootProps()}
        className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-colors ${
          isDragActive
            ? "border-blue-500 bg-blue-50"
            : "border-gray-300 hover:border-gray-400"
        }`}
      >
        <input {...getInputProps()} />
        {isDragActive ? (
          <p className="text-blue-600">أفلِت الملفات هنا...</p>
        ) : (
          <div>
            <p className="text-gray-600">
              اسحب وأفلت الصور هنا، أو انقر للاختيار
            </p>
            <p className="text-sm text-gray-400 mt-1">
              PNG، JPG، WebP — حتى 4 ميغابايت لكل ملف، بحد أقصى 4 ملفات
            </p>
          </div>
        )}
      </div>
 
      {files.length > 0 && (
        <div className="grid grid-cols-4 gap-2">
          {files.map((file, i) => (
            <div key={i} className="relative aspect-square">
              <img
                src={file.preview}
                alt={file.name}
                className="w-full h-full object-cover rounded-lg"
              />
            </div>
          ))}
        </div>
      )}
 
      {isUploading && (
        <div className="w-full bg-gray-200 rounded-full h-3">
          <div
            className="bg-blue-600 h-3 rounded-full transition-all duration-300"
            style={{ width: `${uploadProgress}%` }}
          />
          <p className="text-sm text-center mt-1">{uploadProgress}%</p>
        </div>
      )}
 
      <button
        onClick={handleUpload}
        disabled={files.length === 0 || isUploading}
        className="w-full py-2 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
      >
        {isUploading ? "جارٍ الرفع..." : `رفع ${files.length} ملف(ات)`}
      </button>
 
      {uploadedUrls.length > 0 && (
        <div className="p-4 bg-green-50 rounded-lg">
          <p className="font-semibold text-green-800">اكتمل الرفع!</p>
          {uploadedUrls.map((url, i) => (
            <a
              key={i}
              href={url}
              target="_blank"
              rel="noopener noreferrer"
              className="block text-sm text-green-600 hover:underline truncate"
            >
              {url}
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

npm install react-dropzone

import { createUploadthing, type FileRouter } from "uploadthing/next";
import { UploadThingError } from "uploadthing/server";
 
const f = createUploadthing();
 
async function authenticateUser(req: Request) {
  // استبدل بمنطق المصادقة الفعلي
  const token = req.headers.get("authorization");
  if (!token) return null;
  return { id: "user_123", plan: "pro" as const };
}
 
const PLAN_LIMITS = {
  free: { maxSize: "2MB" as const, maxCount: 2 },
  pro: { maxSize: "8MB" as const, maxCount: 10 },
};
 
export const ourFileRouter = {
  imageUploader: f({
    image: {
      maxFileSize: "8MB",
      maxFileCount: 10,
    },
  })
    .middleware(async ({ req, files }) => {
      const user = await authenticateUser(req);
      if (!user) throw new UploadThingError("Unauthorized");
 
      const limits = PLAN_LIMITS[user.plan];
 
      // التحقق من عدد الملفات حسب الخطة
      if (files.length > limits.maxCount) {
        throw new UploadThingError(
          `خطتك تسمح بحد أقصى ${limits.maxCount} ملفات لكل عملية رفع`
        );
      }
 
      return { userId: user.id, plan: user.plan };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      // الحفظ في قاعدة البيانات
      // await db.insert(uploads).values({
      //   userId: metadata.userId,
      //   url: file.ufsUrl,
      //   name: file.name,
      //   size: file.size,
      // });
 
      return { url: file.ufsUrl };
    }),
} satisfies FileRouter;
 
export type OurFileRouter = typeof ourFileRouter;

"use server";
 
import { UTApi } from "uploadthing/server";
 
const utapi = new UTApi();
 
export async function deleteFile(fileKey: string) {
  try {
    await utapi.deleteFiles(fileKey);
    return { success: true };
  } catch (error) {
    return { success: false, error: "فشل حذف الملف" };
  }
}

"use client";
 
import { useState } from "react";
import { deleteFile } from "@/app/actions";
 
interface GalleryFile {
  key: string;
  url: string;
  name: string;
  size: number;
}
 
export default function FileGallery({
  initialFiles,
}: {
  initialFiles: GalleryFile[];
}) {
  const [files, setFiles] = useState<GalleryFile[]>(initialFiles);
  const [deleting, setDeleting] = useState<string | null>(null);
 
  const handleDelete = async (fileKey: string) => {
    setDeleting(fileKey);
    const result = await deleteFile(fileKey);
 
    if (result.success) {
      setFiles((prev) => prev.filter((f) => f.key !== fileKey));
    } else {
      alert("فشل حذف الملف");
    }
    setDeleting(null);
  };
 
  if (files.length === 0) {
    return (
      <div className="text-center py-12 text-gray-500">
        <p>لم تُرفع أي ملفات بعد.</p>
      </div>
    );
  }
 
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      {files.map((file) => (
        <div
          key={file.key}
          className="group relative bg-white rounded-xl shadow-sm overflow-hidden"
        >
          <div className="aspect-square">
            <img
              src={file.url}
              alt={file.name}
              className="w-full h-full object-cover"
            />
          </div>
 
          <div className="p-2">
            <p className="text-sm font-medium truncate">{file.name}</p>
            <p className="text-xs text-gray-400">
              {(file.size / 1024).toFixed(1)} كيلوبايت
            </p>
          </div>
 
          <button
            onClick={() => handleDelete(file.key)}
            disabled={deleting === file.key}
            className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm transition-opacity hover:bg-red-600 disabled:opacity-50"
          >
            {deleting === file.key ? "..." : "X"}
          </button>
        </div>
      ))}
    </div>
  );
}

import BasicUpload from "@/components/BasicUpload";
import DropzoneUpload from "@/components/DropzoneUpload";
import CustomUpload from "@/components/CustomUpload";
 
export default function Home() {
  return (
    <main className="min-h-screen bg-gray-50 py-12 px-4">
      <div className="max-w-4xl mx-auto space-y-16">
        <div className="text-center">
          <h1 className="text-3xl font-bold">عرض UploadThing</h1>
          <p className="text-gray-600 mt-2">
            ثلاث طرق للتعامل مع رفع الملفات في Next.js
          </p>
        </div>
 
        <section className="bg-white rounded-2xl p-8 shadow-sm">
          <BasicUpload />
        </section>
 
        <section className="bg-white rounded-2xl p-8 shadow-sm">
          <DropzoneUpload />
        </section>
 
        <section className="bg-white rounded-2xl p-8 shadow-sm">
          <CustomUpload />
        </section>
      </div>
    </main>
  );
}

npm run dev