Animated components for GitHub Copilot

app/upload/page.tsx

"use client";
import UploadDropzone, { type Uploader } from "qodesign-free/upload-dropzone";

// XMLHttpRequest reports upload progress; fetch doesn't yet.
const upload: Uploader = (file, onProgress, signal) =>
  new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    const body = new FormData();
    body.append("file", file);
    xhr.upload.onprogress = (e) => e.lengthComputable && onProgress((e.loaded / e.total) * 100);
    xhr.onload = () => (xhr.status < 300 ? resolve() : reject(new Error(xhr.responseText || "Upload failed")));
    xhr.onerror = () => reject(new Error("Network error"));
    signal.addEventListener("abort", () => xhr.abort());
    xhr.open("POST", "/api/upload");
    xhr.send(body);
  });

export default function UploadPage() {
  return (
    <main className="mx-auto max-w-xl px-4 py-16">
      <UploadDropzone upload={upload} accept="image/*,.pdf" maxSize={10 * 1024 * 1024} hint="Images or PDFs, up to 10 MB" />
    </main>
  );
}

app/api/upload/route.ts

import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const data = await request.formData();
  const file = data.get("file");
  if (!(file instanceof File)) return new NextResponse("No file", { status: 400 });

  // Save it wherever you keep files (S3, R2, Supabase Storage...). Here we only read it.
  const bytes = await file.arrayBuffer();
  return NextResponse.json({ name: file.name, size: bytes.byteLength });
}