Mengunggah File (Upload)

// app/api/upload/presign/route.ts (Next.js App Router / Express)
import { NextResponse } from "next/server";
import { Cloudizero } from "@cloudizero/sdk";

const cz = new Cloudizero({
  apiKey: process.env.CLOUDIZERO_API_KEY!,
});

export async function POST(req: Request) {
  // 1. Authorize user session from cookies / auth token
  const { fileName, fileSize, mimeType, projectId } = await req.json();

  // 2. Generate secure signed direct-to-storage upload ticket
  const ticket = await cz.storage.createPresignedUpload({
    projectId,
    fileName,
    fileSize,
    mimeType,
  });

  return NextResponse.json(ticket);
}

// app/api/upload/complete/route.ts (Next.js App Router)
import { NextResponse } from "next/server";
import { Cloudizero } from "@cloudizero/sdk";

const cz = new Cloudizero({
  apiKey: process.env.CLOUDIZERO_API_KEY!,
});

export async function POST(req: Request) {
  const body = await req.json();

  // Finalize asset & index metadata in Cloudizero Database
  const asset = await cz.storage.completeUpload({
    fileId: body.fileId,
    projectId: body.projectId,
    fileName: body.fileName,
    mimeType: body.mimeType,
    fileSize: body.fileSize,
    storageKey: body.storageKey,
  });

  return NextResponse.json(asset);
}

// components/direct-uploader.tsx
"use client";

import { useState } from "react";
import type { PresignedUploadResult, UploadedFile } from "@cloudizero/sdk";

export function DirectUploader({ projectId }: { projectId: string }) {
  const [progress, setProgress] = useState<number>(0);
  const [uploading, setUploading] = useState(false);
  const [cdnUrl, setCdnUrl] = useState<string | null>(null);

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

    setUploading(true);
    setProgress(0);

    try {
      // Step 1: Request signed upload ticket from your backend
      const presignRes = await fetch("/api/upload/presign", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          fileName: file.name,
          fileSize: file.size,
          mimeType: file.type || "application/octet-stream",
          projectId,
        }),
      });
      const ticket: PresignedUploadResult = await presignRes.json();

      // Step 2: Stream binary directly to Cloudizero Storage Engine (Zero-Egress)
      await new Promise<void>((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open("PUT", ticket.uploadUrl);
        xhr.setRequestHeader("Content-Type", file.type || "application/octet-stream");

        xhr.upload.onprogress = (evt) => {
          if (evt.lengthComputable) {
            setProgress(Math.round((evt.loaded / evt.total) * 100));
          }
        };

        xhr.onload = () => (xhr.status >= 200 && xhr.status < 300 ? resolve() : reject(new Error("PUT upload failed")));
        xhr.onerror = () => reject(new Error("Network error during direct upload"));
        xhr.send(file);
      });

      // Step 3: Notify backend to verify asset and register metadata
      const completeRes = await fetch("/api/upload/complete", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          fileId: ticket.fileId,
          projectId,
          fileName: ticket.finalFileName || file.name,
          mimeType: file.type || "application/octet-stream",
          fileSize: file.size,
          storageKey: ticket.storageKey,
        }),
      });
      const recorded: UploadedFile = await completeRes.json();
      setCdnUrl(recorded.url || null);
    } catch (err) {
      console.error("Direct upload failed:", err);
    } finally {
      setUploading(false);
    }
  };

  return (
    <div className="space-y-4">
      <input type="file" onChange={handleFileChange} disabled={uploading} />
      {uploading && (
        <div className="space-y-1">
          <p className="text-sm font-medium">Uploading: {progress}%</p>
          <div className="w-full bg-muted rounded-full h-2">
            <div className="bg-blue-600 h-2 rounded-full transition-all" style={{ width: `${progress}%` }} />
          </div>
        </div>
      )}
      {cdnUrl && (
        <a href={cdnUrl} target="_blank" rel="noreferrer" className="text-blue-600 text-sm font-medium">
          View uploaded media on CDN &rarr;
        </a>
      )}
    </div>
  );
}