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"
    >
      <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">{progress}%</p>
    </div>
  );
}