File Uploads

1// src/app/api/upload/route.ts
2
3import { NextRequest, NextResponse } from "next/server";
4import { auth } from "@/lib/auth";
5
6// Allowed MIME types
7const ALLOWED_TYPES = [
8  "image/jpeg",
9  "image/png",
10  "image/gif",
11  "image/webp",
12  "application/pdf",
13];
14
15// Max file size (5MB)
16const MAX_SIZE = 5 * 1024 * 1024;
17
18export async function POST(request: NextRequest) {
19  try {
20    // Check authentication
21    const session = await auth();
22    if (!session?.user) {
23      return NextResponse.json(
24        { error: "Unauthorized" },
25        { status: 401 }
26      );
27    }
28
29    const formData = await request.formData();
30    const file = formData.get("file") as File | null;
31
32    if (!file) {
33      return NextResponse.json(
34        { error: "No file provided" },
35        { status: 400 }
36      );
37    }
38
39    // Validate file type
40    if (!ALLOWED_TYPES.includes(file.type)) {
41      return NextResponse.json(
42        { error: "Invalid file type. Allowed: JPEG, PNG, GIF, WebP, PDF" },
43        { status: 400 }
44      );
45    }
46
47    // Validate file size
48    if (file.size > MAX_SIZE) {
49      return NextResponse.json(
50        { error: "File too large. Maximum size is 5MB" },
51        { status: 400 }
52      );
53    }
54
55    // Convert to buffer for processing
56    const bytes = await file.arrayBuffer();
57    const buffer = Buffer.from(bytes);
58
59    // Generate unique filename
60    const timestamp = Date.now();
61    const extension = file.name.split(".").pop();
62    const filename = `${session.user.id}-${timestamp}.${extension}`;
63
64    // Upload to S3/R2 (using AWS SDK v3)
65    const { S3Client, PutObjectCommand } = await import("@aws-sdk/client-s3");
66
67    const s3 = new S3Client({
68      region: process.env.AWS_REGION || "auto",
69      endpoint: process.env.S3_ENDPOINT, // For R2: https://<account>.r2.cloudflarestorage.com
70      credentials: {
71        accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
72        secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
73      },
74    });
75
76    await s3.send(new PutObjectCommand({
77      Bucket: process.env.S3_BUCKET!,
78      Key: `uploads/${filename}`,
79      Body: buffer,
80      ContentType: file.type,
81    }));
82
83    const fileUrl = `${process.env.S3_PUBLIC_URL}/uploads/${filename}`;
84
85    return NextResponse.json({
86      success: true,
87      file: {
88        name: filename,
89        originalName: file.name,
90        size: file.size,
91        type: file.type,
92        url: fileUrl,
93      },
94    });
95  } catch (_) {
96    console.error("Upload error:", error);
97    return NextResponse.json(
98      { error: "Upload failed" },
99      { status: 500 }
100    );
101  }
102}

1"use client";
2
3import { useState } from "react";
4import { useDropzone } from "react-dropzone";
5import { Button } from "@/components/ui/button";
6
7export function FileUploadForm() {
8  const [files, setFiles] = useState<File[]>([]);
9  const [uploading, setUploading] = useState(false);
10  const [progress, setProgress] = useState(0);
11  const [error, setError] = useState<string | null>(null);
12
13  const { getRootProps, getInputProps, isDragActive } = useDropzone({
14    onDrop: (acceptedFiles) => {
15      setFiles(acceptedFiles);
16      setError(null);
17    },
18    maxFiles: 5,
19    maxSize: 5 * 1024 * 1024,
20    accept: {
21      "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"],
22    },
23  });
24
25  const handleUpload = async () => {
26    if (files.length === 0) return;
27
28    setUploading(true);
29    setError(null);
30    setProgress(0);
31
32    try {
33      for (let i = 0; i < files.length; i++) {
34        const file = files[i];
35        const formData = new FormData();
36        formData.append("file", file);
37
38        const response = await fetch("/api/upload", {
39          method: "POST",
40          body: formData,
41        });
42
43        if (!response.ok) {
44          const data = await response.json();
45          throw new Error(data.error || "Upload failed");
46        }
47
48        setProgress(((i + 1) / files.length) * 100);
49      }
50
51      setFiles([]);
52    } catch (err) {
53      setError(err instanceof Error ? err.message : "Upload failed");
54    } finally {
55      setUploading(false);
56    }
57  };
58
59  return (
60    <div className="space-y-4">
61      <div
62        {...getRootProps()}
63        className={cn('border-2 border-dashed p-6 text-center cursor-pointer transition-colors', mode.radius, mode.state.hover.card)}
64      >
65        <input {...getInputProps()} />
66        <p className="font-mono text-sm text-muted-foreground">
67          {isDragActive ? "Drop files here..." : "Drag & drop files or click to browse"}
68        </p>
69      </div>
70
71      {uploading && (
72        <div className="space-y-2">
73          <div className="h-2 bg-muted overflow-hidden">
74            <div
75              className="h-full bg-primary transition-all"
76              style={{ width: `${progress}%` }}
77            />
78          </div>
79          <p className="font-mono text-sm text-muted-foreground text-center">
80            Uploading... {Math.round(progress)}%
81          </p>
82        </div>
83      )}
84
85      {error && (
86        <p className="font-mono text-xs text-destructive">{error}</p>
87      )}
88
89      <Button
90        onClick={handleUpload}
91        disabled={files.length === 0 || uploading}
92        className="w-full"
93      >
94        {uploading ? "Uploading..." : "Upload Files"}
95      </Button>
96    </div>
97  );
98}

1// Profile Avatar
2<Dropzone
3  maxFiles={1}
4  maxSize={2 * 1024 * 1024}  // 2MB
5  accept={{
6    "image/*": [".png", ".jpg", ".jpeg", ".webp"],
7  }}
8/>
9
10// Document Upload
11<Dropzone
12  maxFiles={10}
13  maxSize={10 * 1024 * 1024}  // 10MB
14  accept={{
15    "application/pdf": [".pdf"],
16    "application/msword": [".doc"],
17    "application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
18  }}
19/>
20
21// Image Gallery
22<Dropzone
23  maxFiles={20}
24  maxSize={5 * 1024 * 1024}  // 5MB
25  accept={{
26    "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"],
27  }}
28/>