File Uploader Component

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

const app = express();

app.post("/api/upload-token", requireAuth, async (req, res) => {
  const signed = await signUpload(
    process.env.OPENINARY_URL!,
    process.env.OPENINARY_API_KEY!,
    { expiresIn: 300, folder: `users/${req.user.id}` },
  );
  res.json(signed);
});

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

export default {
  async fetch(request: Request, env: Env) {
    // authenticate the request first...
    const signed = await signUpload(env.OPENINARY_URL, env.OPENINARY_API_KEY, {
      expiresIn: 300,
      folder: "uploads",
    });
    return Response.json(signed);
  },
};

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

export function Uploader() {
  const sign = async () => {
    const res = await fetch("/api/upload-token", { method: "POST" });
    return res.json();
  };

  return (
    <FileUploader
      baseUrl={import.meta.env.VITE_OPENINARY_URL}
      sign={sign}
    />
  );
}

<FileUploader
  sign={sign} // your signing endpoint should scope folder to "uploads/avatars"
  accept={{ "image/jpeg": [".jpg", ".jpeg"], "image/png": [".png"] }}
  maxSize={5 * 1024 * 1024}     // 5 MB
  maxFiles={1}
  multiple={false}
  transformations={["w_512,h_512,c_fill,f_webp"]} // pre-warm a variant
  onSuccess={(files) => setAvatar(files[0].url)}
/>