Create src/user/UploadZone.tsx

src/user/UploadZone.tsx

@@ -0,0 +1,30 @@
+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>
+  );
+}