File Upload & Storage

// app/api/upload/route.ts
import { NextRequest, NextResponse } from "next/server"
import { writeFile, mkdir } from "fs/promises"
import path from "path"

export async function POST(request: NextRequest) {
  const formData = await request.formData()
  const file = formData.get("file") as File | null

  if (!file) {
    return NextResponse.json({ error: "No file provided" }, { status: 400 })
  }

  // Validate type
  if (!file.type.startsWith("image/")) {
    return NextResponse.json({ error: "Only images allowed" }, { status: 400 })
  }

  // Validate size — 5MB limit
  if (file.size > 5 * 1024 * 1024) {
    return NextResponse.json(
      { error: "File too large (max 5MB)" },
      { status: 400 }
    )
  }

  const bytes = await file.arrayBuffer()
  const buffer = Buffer.from(bytes)
  const uploadDir = path.join(process.cwd(), "public/uploads")
  await mkdir(uploadDir, { recursive: true })
  const filename = `${Date.now()}-${file.name}`
  await writeFile(path.join(uploadDir, filename), buffer)

  return NextResponse.json({ url: `/uploads/${filename}` })
}

// app/api/uploadthing/core.ts
import { createUploadthing, type FileRouter } from "uploadthing/next"
import { auth } from "@/lib/auth"

const f = createUploadthing()

export const ourFileRouter = {
  avatarUpload: f({ image: { maxFileSize: "4MB", maxFileCount: 1 } })
    .middleware(async () => {
      const user = await auth()
      if (!user) throw new Error("Unauthorized")
      return { userId: user.id }
    })
    .onUploadComplete(async ({ metadata, file }) => {
      console.log("Upload complete for userId:", metadata.userId)
      console.log("File URL:", file.url)
    }),

  postImage: f({ image: { maxFileSize: "16MB", maxFileCount: 9 } })
    .middleware(async () => {
      const user = await auth()
      if (!user) throw new Error("Unauthorized")
      return { userId: user.id }
    })
    .onUploadComplete(async ({ file }) => {
      return { uploadedBy: file.name }
    }),
} satisfies FileRouter

export type OurFileRouter = typeof ourFileRouter

"use client"
import { useState } from "react"

export function UploadWithProgress() {
  const [progress, setProgress] = useState(0)
  const [url, setUrl] = useState<string | null>(null)

  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    if (!file) return

    const formData = new FormData()
    formData.append("file", file)

    const xhr = new XMLHttpRequest()
    xhr.upload.addEventListener("progress", (event) => {
      if (event.lengthComputable) {
        setProgress(Math.round((event.loaded / event.total) * 100))
      }
    })
    xhr.addEventListener("load", () => {
      const { url } = JSON.parse(xhr.responseText)
      setUrl(url)
    })

    xhr.open("POST", "/api/upload")
    xhr.send(formData)
  }

  return (
    <div>
      <input type="file" onChange={handleUpload} />
      {progress > 0 && (
        <div className="h-2.5 w-full rounded-full bg-gray-200">
          <div
            className="h-2.5 rounded-full bg-blue-600"
            style={{ width: `${progress}%` }}
          />
        </div>
      )}
      {url && (
        <img
          src={url}
          alt="Uploaded"
          className="mt-4 h-32 w-32 rounded object-cover"
        />
      )}
    </div>
  )
}

"use client"
import { useState, useRef } from "react"

export function DropZone() {
  const [preview, setPreview] = useState<string | null>(null)
  const [isDragging, setIsDragging] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)

  function handleDrop(e: React.DragEvent) {
    e.preventDefault()
    setIsDragging(false)
    const file = e.dataTransfer.files[0]
    if (file && file.type.startsWith("image/")) {
      setPreview(URL.createObjectURL(file))
    }
  }

  async function handleUpload() {
    if (!preview) return
    // Upload logic — same as UploadWithProgress
  }

  return (
    <div
      className={`cursor-pointer rounded-lg border-2 border-dashed p-8 text-center ${isDragging ? "border-blue-500 bg-blue-50" : "border-gray-300"}`}
      onDragOver={(e) => {
        e.preventDefault()
        setIsDragging(true)
      }}
      onDragLeave={() => setIsDragging(false)}
      onDrop={handleDrop}
      onClick={() => inputRef.current?.click()}
    >
      <input
        ref={inputRef}
        type="file"
        accept="image/*"
        className="hidden"
        onChange={(e) => {
          const file = e.target.files?.[0]
          if (file) setPreview(URL.createObjectURL(file))
        }}
      />

      {preview ? (
        <img src={preview} alt="Preview" className="mx-auto max-h-48 rounded" />
      ) : (
        <p className="text-gray-500">Drag an image here or click to browse</p>
      )}

      {preview && (
        <button
          onClick={handleUpload}
          className="mt-4 rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
        >
          Upload
        </button>
      )}
    </div>
  )
}

// app/api/upload/s3-url/route.ts
import { NextRequest, NextResponse } from "next/server"
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3"
import { getSignedUrl } from "@aws-sdk/s3-request-presigner"

const s3 = new S3Client({
  region: process.env.AWS_REGION!,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
  },
})

export async function POST(request: NextRequest) {
  const { filename, contentType } = await request.json()
  const key = `uploads/${Date.now()}-${filename}`

  const command = new PutObjectCommand({
    Bucket: process.env.S3_BUCKET!,
    Key: key,
    ContentType: contentType,
  })

  const url = await getSignedUrl(s3, command, { expiresIn: 3600 })
  return NextResponse.json({ url, key })
}

// Client — uploads directly to S3
async function uploadToS3(file: File) {
  const { url, key } = await fetch("/api/upload/s3-url", {
    method: "POST",
    body: JSON.stringify({ filename: file.name, contentType: file.type }),
  }).then((r) => r.json())

  await fetch(url, {
    method: "PUT",
    body: file,
    headers: { "Content-Type": file.type },
  })

  return key
}