Integra las subidas en dos llamadas

// app/api/upload-url/route.ts
export async function POST(req: Request) {
  const { filename, contentType, sizeBytes } = await req.json();

  const res = await fetch("https://uploads.wavesoft.cloud/presign", {
    method: "POST",
    headers: {
      // La clave vive en el servidor, nunca uses NEXT_PUBLIC_
      "x-api-key": process.env.UPLOADS_API_KEY!,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      filename,
      contentType,
      sizeBytes,
      location: "uploads",
    }),
  });

  if (!res.ok) {
    return Response.json(
      { error: "No se pudo firmar la subida" },
      { status: res.status }
    );
  }

  return Response.json(await res.json());
}

// components/fileUploader.tsx
"use client";

import { useState } from "react";

export function FileUploader() {
  const [publicUrl, setPublicUrl] = useState<string | null>(null);
  const [uploading, setUploading] = useState(false);

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

    setUploading(true);
    try {
      // 1. Pide la URL firmada a tu propio endpoint
      const presign = await fetch("/api/upload-url", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          filename: file.name,
          contentType: file.type,
          sizeBytes: file.size,
        }),
      }).then((r) => r.json());

      // 2. Sube el archivo directo al bucket
      await fetch(presign.uploadUrl, {
        method: "PUT",
        headers: { "Content-Type": file.type },
        body: file,
      });

      // 3. Guarda presign.publicUrl donde lo necesites
      setPublicUrl(presign.publicUrl);
    } finally {
      setUploading(false);
    }
  }

  return (
    <div>
      <input type="file" onChange={handleChange} disabled={uploading} />
      {publicUrl && <a href={publicUrl}>Ver archivo</a>}
    </div>
  );
}