Integrate with React

import express from "express";
import { signUpload } from "./lib/upload-token";

const app = express();

// requireAuth is your own: this route hands out an upload grant.
app.post("/api/upload-token", requireAuth, async (req, res) => {
  const signed = await signUpload(
    process.env.OPENINARY_URL!,
    process.env.OPENINARY_API_KEY!,
    // Scoped to the authenticated user, server-side.
    { expiresIn: 300, folder: `users/${req.user.id}` },
  );
  res.json(signed);
});

import { useState } from "react";
import { FileUploader } from "@/components/openinary/file-uploader";

export function Uploader() {
  const [image, setImage] = useState<string | null>(null);

  return (
    <>
      <FileUploader
        baseUrl={import.meta.env.VITE_OPENINARY_URL}
        sign={async () => {
          const res = await fetch("/api/upload-token", { method: "POST" });
          if (!res.ok) throw new Error("Could not sign upload");
          return res.json();
        }}
        onSuccess={(files) => {
          // files[0].path is what you store; files[0].url is the delivery
          // path, with no transformation segment in it.
          setImage(
            `${import.meta.env.VITE_OPENINARY_URL}${files[0].url}`,
          );
        }}
      />

      {image && <img alt="Uploaded" src={image} />}
    </>
  );
}