src/user/UploadZone.tsx

import api from "../api";
import { useState } from "react";

export default function UploadZone() {
  const [progress, setProgress] = useState(0);

  async function upload(file: File) {
    await api.post("/upload/init", { size: file.size });
    await api.post("/upload/complete");
    setProgress(100);
  }

  return (
    <div
      onClick={() => document.getElementById("file")?.click()}
      className="border-2 border-dashed p-10 rounded-xl cursor-pointer hover:border-blue-500"
    >
      <input id="file" type="file" hidden onChange={e=>e.target.files && upload(e.target.files[0])} />
      <p>⬆️ Click to upload</p>
      <p className="mt-2 text-sm">{progress}%</p>
    </div>
  );
}